New/Mode actions are iframes, so they're web pages that can be embedded and displayed within other webpages. You can embed an adovacy action without needing to do any extra coding.
Once you’ve created a campaign action, you'll need to embed the action's code on your website or a page created on your CRM to make the action accessible to your supporters. You can do this at any point during the action design process.
Once the code is embedded, all updates, tweaks, and dramatic overhauls you make to your advocacy action will be automatically updated, so you’ll see the changes reflected instantly on the associated webpage or CRM.
Note that Wix doesn't work well with iframes so New/Mode actions can't be embedded on Wix sites without customization on the Wix end.
This article covers:
Finding your Action's Embed Code
Embedding your Action in WordPress | Squarespace | NationBuilder | ActionKit | ActionNetwork
Embedding your Action's Social Buttons
A note on web page security
SSL (Secure Sockets Layer) is the standard security technology for ensuring that all data passed between a web server and a browser is encrypted. You can recognize web pages that use SSL to keep data private because their URL begins with HTTPS. (More on HTTPS here).
Always embed your actions on SSL-protected web pages. If your website doesn't use SSL yet, you can use this guide to migrate it to HTTPS.
Finding your Action's Embed Code
Your campaign action embed code is accessible on the Embed Code screen under the Preview tab. Just copy and paste, or click Copy to Keyboard and paste the code on your website:
Embedding your Action in a WordPress Page
New/Mode advocacy actions are built using JavaScript, and can only be added to Creator or Entrepreneur plans on wordpress.com, and Blog wordpress.org pages. If you have a Free, Starter, or Explorer Plan on wordpress.com, you can create an action page to publish your action there instead.
If you are a Business-level or blog WordPress user, you can easily embed New/Mode action code. Here's how:
1. Copy and paste your action's Embed Code into your page/post text editor. If you're using the Blocks editor, use the Custom HTML Block found under Formatting.
If you are still not seeing the embed after this step, and you are using a wordpress.com page, go on to Step 2.
2. (Only for wordpress.com pages) Add <script type="text/javascript"> before your New/Mode embed code. Then add </script> at the end of your New/Mode action embed code:
You can read more about using JavaScript in WordPress here.
Embedding your Action in a Squarespace Page
Embedding New/Mode advocacy actions uses iframes, so they can only be added to Squarespace sites on the Business or Commerce plans. If your site is on the Personal plan, you won't be able to embed your action.
Follow the steps below to embed your New/Mode action into your Squarespace website by adding a Code Block:
1. Start by copying your action's Embed Code.
2. Log into your Squarespace website and create a new page or post.
3. Choose an insert point and add the Code Block.
4. Copy and paste your New/Mode embed code into the Code Block. Make sure you select HTML. Make sure that display source is unchecked.
5. Click Apply.
6. Save the page/post you are working on, just like in the handy walkthrough:
Embedding your Action in a NationBuilder Page
1. Start by copying your action's Embed Code.
2. Log into your Nationbuilder nation and select the website page where you want your New/Mode tool embedded (see image below):
3. Click Template (1). Copy and paste your New/Mode Tool embed code right below the <div id="content"> html code (2), then click the Save and Publish button (3):
Alternatively, you can customize a template on the NationBuilder side with the help of a NationBuilder developer to enable embedding New/Mode actions using Insert Tags instead of Embed Codes.
Embedding your Action in an ActionKit Page
1. Create an ActionKit Page. Click here to learn how to create an ActionKit page.
2. Copy and paste your action's Embed Code into your ActionKit HTML editor - please note you must be in HTML text editor when adding the embed code.
3. Save and publish your ActionKit page.
Embedding your Action in an Action Network Page
1. Create an Action Network Campaign Page. Click here to learn how to create an Action Network Campaign page.
2. Copy and paste your action's Embed Code into your Action Network HTML editor - please note you must be in HTML text editor when adding the embed code.
3. Save and publish your Action Network campaign page. Let the submissions roll in!
Embedding your Social Buttons
The Social Buttons Embed Code is the code you will want to use to add your Social buttons to custom thank you pages – just add this code to your page's HTML, and you're good to go!
You do NOT need to use this code if you are using a New/Mode thank you page, as the buttons will be added automatically.
Last updated: August 16, 2022