Marketing Cloud Configuration: Building Your Form
This process guides you through building a data collection form using Marketing Cloud's CloudPages and then embedding it via an iframe.
Steps:
Navigate to Web Studio and select CloudPages from the dashboard.
Create a new folder if you don't have one; this helps keep your workspace organized
With your desired folder selected, click Add Content > Landing Page in the upper right corner.
Customizing Your Landing Page
After naming your landing page and defining its layout, proceed to customize it:
Add Text & Fields: Use content blocks, such as the Reference Content block, to embed predefined fields like
FirstName,LastName,EmailAddress, and other necessary text.
Configure Submission Options: To set up a return URL or a thank you page after form submission, navigate to the Submit Options tab and customize as required.
Integrating SalesWings Tracking
For SalesWings to accurately register form submissions, you must add its tracking script to your form.
Follow the instructions detailed in the How to add SalesWings tracking Javascript to Salesforce Marketing Cloud CloudPages article.
Add an HTML block to your form
Paste the SalesWings tracking script into this HTML block.
After copying the tracking script, the following further modifications are necessary.
The following script:
sw(
"init",
{
pid: "...",
debug: !0,
transport: "post",
clientSideCookie: "true",
},
"trackPageviews"
);
sw("trackForms", { mode: "submit" });
Should be integrated with the binding instruction (this ensures the script will work when the form is embedded in an iframe. The list of allowed domains should be defined accordingly, it should include the marketing cloud domain and the domain of the page where the popup will be displayed) and the the enablePopups function call (this ensures the conversion tracking would work on form submission):
sw(
"init",
{
pid: "8ac30794-01e2-4945-85d5-bd9790426b8b",
debug: !0,
transport: "post",
binding: {
mode: "guest",
trustedDomains: [
"...",
"...",
],
}
clientSideCookie: "true",
},
"trackPageviews"
);
sw("trackForms", { mode: "submit" });
sw("enablePopups");
Publishing and Embedding Your Landing Page
Click Schedule/Publish to save and publish your new landing page.
Once published, your landing page will have a unique URL.
You can then embed this landing page URL using an
<iframe>within your SalesWings popup.
Additional Resource
SalesWings Popup Creation
On the SalesWings Cockpit, Navigate to Settings > Falcon.
Expand the Engagement Popups section.
Click Add a new popup.
Assign a name and description for your popup, then click Save.
Building Your Popup with the Marketing Cloud Form
Now, let's integrate your Marketing Cloud landing page into the SalesWings popup.
Click the Build button to open the SalesWings visual popup editor.
Add an HTML block to your popup.
Customize the HTML block's code to include the following
<iframe>tag:HTML
<iframe src="https://your-marketing-cloud-landing-page-url" width="100%" height="600" style="border:none;"></iframe>
Important: Remember to replace
"https://your-marketing-cloud-landing-page-url"with the actual unique URL of the landing page you published in Marketing Cloud.You can modify the
<iframe>parameters as needed, especially theheightattribute, which directly controls the height of your popup. For example, if your form is longer, you'll want to increase theheightto ensure it's fully visible.
The final result will be your Marketing Cloud form seamlessly embedded within the SalesWings popup.
Testing
To verify your new pop-up is working as expected, click on the Preview button, fill out the form, and click on the Submit button. When you submit the embedded form, your data will be captured directly within Marketing Cloud. You can check your information here to ensure it's all correct.
Have any questions or concerns? Feel free to reach out to your Customer Success Manager!