How to add Embed Code to a Page

Mia E Lee
Mia Ellis-Lee
Design & Frontend Development
Write to Mia
Share

Oftentimes, third party services such as MailChimp, SurveyMonkey, or TypeForm will require you to add embed code onto your site in order to display your form, map, or other element. We’ve briefly covered embed codes in our blog post Embed Videos Responsively. However, sometimes your third party service will require you to add embed code that contains a combination of Javascript and HTML, rather than an iFrame and some other HTML.

Unfortunately, this doesn’t play nicely with Sitefinity’s content blocks, as pasting inline Javascript into a content block will result in your <script> tags being stripped out for security reasons. Fear not though, this Sitefinity tip will show you how to add your embed code to your page without your <script> tags being stripped out. We’ll be using SurveyMonkey as our third party service in this example.

  1. Grab the embed code from your third party service. This is typically obtained through the share options of your third party service, although every one is different. With SurveyMonkey, from the “Collect Responses” tab, we create a new “Website collector”. From here, SurveyMonkey gives us the choice to select “Embedded Survey”, “Popup Invitation”, or “Popup Survey”. We’ll be selecting “Embedded Survey”.
  2. Copy the embed code that appears.

    Embed code provided by SurveyMonkey
  3. You’ll need to separate your Javascript code from your HTML. Let’s take a look at the entire embed code that we got from SurveyMonkey before we start.

    <script>(function(t,e,s,n){var o,a,c;t.SMCX=t.SMCX||[],e.getElementById(n)||(o=e.getElementsByTagName(s),a=o[o.length-1],c=e.createElement(s),c.type="text/javascript",c.async=!0,c.id=n,c.src=["https:"===location.protocol?"https://":"http://","widget.surveymonkey.com/collect/website/js/tRaiETqnLgj758hTBazgdy5vKE8sVqYVdzUBpHY7JKsZGJCIG23hv_2Fo8SeIfe5TI.js"].join(""),a.parentNode.insertBefore(c,a))})(window,document,"script","smcx-sdk");</script><a style="font: 12px Helvetica, sans-serif; color: #999; text-decoration: none;" href=https://www.surveymonkey.com> Create your own user feedback survey </a>

    You can spot the division between the Javascript and the HTML by looking for the <script> tags. The opening tag, “<script>” shows you where the Javascript starts. The closing tag, “</script>” shows you where the Javascript ends. So our Javascript code consists of the following:

    <script>(function(t,e,s,n){var o,a,c;t.SMCX=t.SMCX||[],e.getElementById(n)||(o=e.getElementsByTagName(s),a=o[o.length-1],c=e.createElement(s),c.type="text/javascript",c.async=!0,c.id=n,c.src=["https:"===location.protocol?"https://":"http://","widget.surveymonkey.com/collect/website/js/tRaiETqnLgj758hTBazgdy5vKE8sVqYVdzUBpHY7JKsZGJCIG23hv_2Fo8SeIfe5TI.js"].join(""),a.parentNode.insertBefore(c,a))})(window,document,"script","smcx-sdk");</script>

    Our HTML code consists of the rest:

    <a style="font: 12px Helvetica, sans-serif; color: #999; text-decoration: none;" href=https://www.surveymonkey.com> Create your own user feedback survey </a>
  4. Now that your embed code has been separated into the Javascript and the HTML, we need to paste our Javascript into a Javascript widget. In your Sitefinity page editor, select the “Java Script” widget from the “Scripts and Styles” section.

    The location of the Sitefinity JavaScript widget

    Drag the Java Script widget onto the page to your desired location. Click the “Set Java Script” button and then select the “Write JavaScript” tab. Paste your Javascript code into the text box that appears, but ensure that you delete your opening and closing <script> tags, as this will be automatically added by the widget. In our case, what we would paste into the widget would be the following:

    (function(t,e,s,n){var o,a,c;t.SMCX=t.SMCX||[],e.getElementById(n)||(o=e.getElementsByTagName(s),a=o[o.length-1],c=e.createElement(s),c.type="text/javascript",c.async=!0,c.id=n,c.src=["https:"===location.protocol?"https://":"http://","widget.surveymonkey.com/collect/website/js/tRaiETqnLgj758hTBazgdy5vKE8sVqYVdzUBpHY7JKsZGJCIG23hv_2Fo8SeIfe5TI.js"].join(""),a.parentNode.insertBefore(c,a))})(window,document,"script","smcx-sdk");

    Select “Where the widget is dropped” under “Where to include in HTML?” and click “Save”.

    Setting up and configuring the Sitefinity JavaScript widget
  5. Next, drag a content block widget onto your page. Ensure that the content block widget is below your Javascript widget. This is to ensure that the Javascript code is able to reference the HTML that will be in the content block.

    A Sitefinity Javascript widget above a content block widget
  6. Copy your HTML and paste it into the content block. Then, save your content block. In our example, our HTML is:
    <a style="font: 12px Helvetica, sans-serif; color: #999; text-decoration: none;" href=https://www.surveymonkey.com> Create your own user feedback survey </a>

And that’s it! You can publish or save your page as a draft and then either visit the page or preview it to see your embed code in action. You can see in the screenshot below that our SurveyMonkey survey is embedded correctly and working on our own page.

An embedded SurveyMonkey survey on a Sitefinity managed page

The most important things to take away from this process are that you need to separate your embed code into Javascript and HTML, place them in their respective widgets, remove the <script> tags from your Javascript, and ensure that your Javascript widget is above your content block widget. If adding embed code is still giving you trouble, please don’t hesitate to get in touch with us!

Back to Top Arrow Up