Users on our Grassroots plan and above have the option to embed their Campaign on an external website. This article will run you through the process to successfully add a New/Mode campaign to your website.
The process of adding a New/Mode Campaign on your website includes embedding JavaScript code into your website. If your website is built using a CMS (e.g. WordPress, Wiz, Squarespace), make sure that you're subscribed to a plan that allows you to embed external JavaScript code snippets.
We don't support Google Sites at the moment.
Embedding your campaign on your website
When going through the process of creating your Campaign form, you'll be asked if you'd like to host your form using the New/Mode platform, or if you would like to embed your form on an external website. The following steps will go through the process of embedding your form on your own website.
- Once you have selected the “Embedded form” option listed above, you'll be prompted to design the form for your website. Once you have added the appropriate design for your form, you'll be brought to the final step of the form creation process, the “Review” page.
- On the Review page, you'll be asked to enter your “External embed URL”. This is how our system verifies where the embed code is going to be used, so it's authenticated appropriately.
- After you have added the correct URL to your Campaign settings, you can now embed your form using the Embed code that is generated below the “External Embed URL” field!
That's all that's needed from the New/Mode side! All that's left is to embed the code as expected on your website. Below are a few resources that might help you with the process of embedding your Campaign on your website!
- WordPress.com: on the Business, Commerce, or Enterprise plan, use a Custom HTML block. (Using a plugin like WPCode Lite would also work!)
- Squarespace: Embed Blocks
- NationBuilder: Add a Widget to your webpage
- Wix Editor: Embedding a Site or a Widget
(Note that Wix will put the form in an iframe within your site, so the external embed URL required in step 2 will be different. Our Support team can help you find that URL if you send us a link to the page where you embedded your campaign)
Why is the embedded campaign not appearing on my page?
This is most likely caused by a CORS (Cross-Origin Resource Sharing) error and can usually be corrected in just a few steps.
1. On a desktop computer, open the page where the campaign is embedded.
2. Right-click anywhere on the page and select the 'Inspect' option on your browser's menu.
3. That will open a panel either on the bottom half or on the side of your browser window. Click on 'Console' on the top-bar of that panel. (The screenshots below come from Firefox but all major browsers offer this option).
4. Refresh the page. You'll see many lines of text in the 'Console' area as the page loads and tries to show the embed. Find a red error message that begins with "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://base.newmode.net".
You can enter "Cross-Origin" into the filter at the top of the panel to make the search easier: any of those errors that mention base.newmode.net will work!
5. Click on the line above the error message to expand it.
6. You'll see that the expanded line has three sections: GET, Response Headers, and Request Headers. Scroll to Request Headers and expand that section if needed.
7. Copy the URL listed as the Origin:
8. Open the Review page of your campaign and paste the origin URL in the 'Campaign URL' field. The change will be applied shortly and your embedded campaign will be visible the next time you reload your webpage.
Hubspot
if you embed our V2 forms on a Hubspot page, it will not show up in the preview or the editor but worry not - once the page is saved and your campaign is live, the form will show up on the actual page.
Last updated: January 17, 2025