There may be times where you want to embed HTML content (like responsive youtube videos) and javascript (like chatbots and widgets) into any OpenCities page. You also might want to use code to embed social media feeds from specific platforms.
As embed codes come from outside of the OpenCities system, 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 either paste them directly into the HTML tab of a page's WYSIWYG Editor or use the plugin tool in the WYSIWYG Toolbar.
To embed code using the plugin tool:
- From the main menu, 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.
- When you've finished editing, 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'll need to 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
This task can be undertaken by users with the following roles: OC Site Designer.
Because your site's homepage does not have a WYSIWYG Editor, embedding a code is slightly different for that particular page.
To embed code in the home page HTML:
- Follow steps one to five in the instructions for embedding code into individual pages.
- Go to More > Themes Management > your theme > Layout > your layout.
- Update to edit the theme.
- Use the Embeds layout item to drag and drop embedded content into the layout.
- Save your layout.
- Preview and Publish your updated theme.
Embed code into every page on your site
If you'd like to embed the same code into every page of your site (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 more and more popular for newsletters and surveys. They can be put into an OpenCities site 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>