With ScreenSpace, you can easily embed any existing form directly inside your Stories. This allows you to leverage your current lead capture systems without the need to recreate forms.
Important Note: Lead data captured through embedded forms cannot be used or analyzed within ScreenSpace. This method strictly embeds the form within your Story.
How to Embed a Form
Choose your Form: Decide which form you want to embed.
Enable Embedding: Make sure the form you intend to embed has permission to be embedded on story.screenspace.io and app.screenspace.io.
Copy the URL: Get the form URL. Not the full iFrame code – you're looking for the original URL or
srclink extracted from the iFrame code.Navigate to your Scene: Open the Scene you intend to add your form to. We recommend using a
Media scene.Paste into ScreenSpace: Insert the URL into your Story via the Webpage tab inside the
Upload Media tool.Activate Interactivity: Use the Interactivity Toggle
to enable interactivity.Adjust The Design: Use the Resolution and Ratio sliders to dial in the form scale and aspect ratio. Use the Scale under the
Media Appearance tool to adjust the overall size of your form.
Pre-Filling Your Form
Pre-fill form fields by including variables inside the embed URL that can be passed into the form. This can include known lead info, your Story name, conversion button, etc. This feature is available to Growth plans only.
Create Variables: Wrap any text inside your URL with brackets {} to turn it into a variable.
Example: https://share.hsforms.com/formId?first_name={First Name}&source={Story Name}
Set the Variable: You can either pre-set the variable inside your Share Link, or dynamically set the variable via your Story's UTM parameter.
Submission Actions
Enhance interactivity by triggering actions inside your Story based on form submissions. For instance, a form submission within an embedded Typeform can trigger the Story to advance to another Scene or open a URL.
How to Use Submission Actions (No Code):
Set the Redirect URL: Have your form submission redirect to https://www.screenspace.io/trigger
Set the Trigger: Click Add User Actions and select Custom from the dropdown inside the Hero Media tool
Define the postMessage: Enter "Trigger" inside the postMessage field.
Integrate and Test: Test the interactions to ensure seamless integration and functionality.
How to Use Submission Actions (Advanced):
Trigger postMessage: Add the following to the submission event inside the iFrame – Reference:
window.parent.postMessage(' [ Custom Message ] ','https://story.screenspace.io'))
Set the Trigger: Click Add User Actions and select Custom from the dropdown inside the Hero Media tool
Define the postMessage: Enter your postMessage's [ Custom Message ] into the ScreenSpace field.
Integrate and Test: Test the interactions to ensure seamless integration and functionality.
For HubSpot, Marketo, and Pardot we recommend connecting your forms via a native form in order to take advantage of ScreenSpace lead capture and engagement data inside ScreenSpace as well.