Best practices for integrating third party widgets

Posts in Digital Deployment's CMS have an Embed HTML field which is specifically designed to accommodate widgets and other supplied bits of HTML provided by third party vendors.

You can find this field when advanced mode is on, in the Display Settings tab. If you would like the embedded content to display in a specific place within the body, you can add [embed] in the text where you would like it to display. 

Widgets are normally self-contained snippets of HTML. They may also contain small bits of CSS or Javascript, which should be linked externally or included in the HTML.

Here's an example of valid widget code:

<div id="widget">

  <button id="widget_calculate">Calculate</button>

  <div id="widget_result"></div>

</div>

<script>

  $(document).ready(function() {

    $("#widget_calculate").click(function() {

      $("#widget_result").text("The amount is $100");

    });

  });

</script>

Additional tips:

• Widgets that are Javascript-based are preferred over widgets that are iframe-based because they can embed elements natively on the page, and will match fonts, colors, etc.
• If the third-party cannot provide a Javascript-based widget, then seeing if they can allow for embedding of HTML/Javascript in the header, that will give us control of the page.
• Elements should be properly namespaced, (e.g. widget_) for classes, ID, and other element names so they do not conflict with other page elements. 
• The widget will display in Full display mode, and sometimes in the teaser of the post (depending on the display settings on the particular block where it is displayed). If you need the widget to display consistently in the teaser, e.g. within a pod, it is recommended that you contact Digital Deployment for assistance to ensure consistent display.

Important note about embedding on landing (term) pages!

In most cases, the client will want to put the widget directly on a term (landing) page. In order for this to work, it is best to insert it into the overview. As of the time of writing this KB article, it is also required that you add some additional text in order for the embed field to display, e.g. you must put in the body:

Please contact your legislators, sign up for updates, and take action using our interactive tool. 

[embed]

To see a Javascript-based embedded widget in action, visit https://www.calrest.org/store