There may be times when you want to embed HTML content (like responsive YouTube videos) and Javascript (like chatbots and widgets) into any page on your website. You might also want to use code to embed social media feeds from specific platforms.
As embed codes come from outside the our platform, we cannot ensure that the added content is fully accessible. Most video platforms will enable you to add a responsive video (which will resize for the device it's viewed on), but be sure to check if the embed codes are accessible in the platform's documentation.
Embed Code into Individual Pages
To embed code snippets into an individual page, you can paste them directly into the HTML tab of a page's WYSIWYG Editor or use the plugin tool in the WYSIWYG Toolbar.
Only OC Developers, OC Site Managers, and OC System Administrators can add embed codes into More > Embed codes. OC Power Publishers, OC Site Managers, OC System Administrators, or custom roles with Advanced WYSIWYG permissions can insert them into pages.
To embed code using the plugin tool:
- Go to More > Embed codes.
- Select Add code.
- Name your code and paste the code snippet into the Embed code field.
- Save your changes, and your new embed will appear in the list.
- Go to any page and select Update.
- Open the WYSIWYG Editor.
- Select the Insert Plugins tool from the WYSIWYG Toolbar.
- In the drop-down menu, select Embed code - YourEmbedCodeName.
- After editing any other content, select Save Content and Close, then Publish your page.
The method you use to add embed codes will differ depending on the code. If it has JavaScript, you must use the Insert Plugins tool in the WYSIWYG Toolbar. But for videos and OpenForms, you can paste them straight into the WYSIWYG Editor using the Paste HTML tool.
Embed Code into Your Homepage
Only users with the OC Site Designer role can insert embed codes into the theme.
Because your site's homepage does not have a WYSIWYG Editor, embedding code is slightly different for that page.
To embed code in the home page HTML:
- Go to More > Embed codes.
- Select Add code.
- Name your code and paste the code snippet into the Embed code fields.
- Save your changes, and your new embed will appear in the list.
- Go to More > Themes Management > your theme > Layout > your layout.
- Update to edit the theme.
- Drag and drop the Embeds widget into a layout row.
- Use the Embed drop-down menu to choose the embed you added and select Apply.
- Select Save Layout.
- Preview your theme to ensure that all edits are working as expected.
- Publish your updated theme.
Embed Code into Every Page on Your Site
If you'd like to embed the same code into every site page (like an embed code for a chatbot), use the "Custom Injection - Footer" device variable. Instead of applying an embed code you have previously added in site management, as in the examples above, enter the code you'd like to embed directly into the Default Value field.
FAQ: Embedding a Mailchimp Form
MailChimp is becoming increasingly popular for newsletters and surveys. These can be embedded into your website using an embed code, but some extra HTML code needs to be added before your MailChimp account starts receiving results.
- Once you've created your form on MailChimp, use the instructions in the MailChimp help center to generate an embed code with javascript disabled.
- Using the code provided below, paste the code from MailChimp in place of the line: {INSERT YOUR CODE HERE}.
- Once your HTML code is ready, follow the steps to insert an embed code into an individual page. We recommend using an OC General page for a MailChimp form.
<script type="text/template" class="template-nested-form">
{INSERT YOUR CODE HERE}
</script>
<script>!function(){for(var e=document.querySelectorAll("script.template-nested-form"),t=0;t<e.length;t++)!function(e){var t="",n=e.innerHTML,i=document.createElement("div");i.className="nested-form-embed",e.parentNode.replaceChild(i,e),i.innerHTML=n.replace(/<form[^>]+>/g,function(e){return t=e.replace(/\s(id|name)\s*=\s*("[^"]*"|'[^']*')/gi,"")+"</form>",e.replace(/\s[^\s<=]+(\s*=\s*("[^"]*"|'[^']*'))?/gi,function(e){return e.replace(/^(\s)(action|enctype|method|novalidate|accept-charset|autocapitalize|autocomplete|name|rel|target)(\s*=.*)?/i,"")})}).replace(/(<\/?)form([\s>])/ig,"$1div$2"),i.querySelector('[type="submit"]').addEventListener("click",function(e){for(e.preventDefault();o.lastElementChild;)o.removeChild(o.lastElementChild);o.innerHTML="";for(var t=[],n=i.querySelectorAll("input,select,textarea"),a=0;a<n.length;a++){var r=n[a];if(r.name&&-1===t.indexOf(r.name))switch(r.type.toLowerCase()){case"radio":t.push(r.name);var c=i.querySelector('input[type="radio"][name="'+r.name+'"]:checked');c&&d(o,c.name,c.value);break;case"checkbox":r.checked&&d(o,r.name,r.value);break;case"select":for(var l=0;l<r.selectedOptions.length;l++)d(o,r.name,r.selectedOptions[l].value);break;default:d(o,r.name,r.value)}}o.submit()});var a=document.createElement("div");a.innerHTML=t;var o=a.firstChild;window.addEventListener("load",function(){document.body.appendChild(o)})}(e[t]);function d(e,t,n){var a=document.createElement("input");a.type="hidden",a.name=t,a.value=n,e.appendChild(a)}}();</script>