Custom Element Deployment Guide

Follow

Will HealCode Custom Elements work on my website?

HealCode links work on almost all web builders. WordPress, Squarespace, GoDaddy, and many more. There are a few web builders that don't support custom elements, which is the technology that our HealCode links utilize to operate. We've discovered the following web builders do not support our Links:

  • Association Web Pros
  • Jimdo
  • Older versions of Shopify
  • Like Sew Websites

If you have one of the above web builders, fear not. We can still deploy widgets, but you'll need to contact a HealCode representative in order to get a separate widget code.

How do I deploy with Custom Elements?

Good news!  If you’ve installed HealCode Links, you already know how to deploy a widget with custom elements!  The only difference in the deployment process is the <healcode-widget> tag you’re using and activating custom elements for widgets on your HealCode account.
 
The Quick & Dirty Way (for traditional multi-page websites):
 
  1. In the settings for any supported widget, you should see something similar to the following:
     
  2. Copy and paste the widget code in the page source where you want the widget to load.  Please note, if the <script> tag loading healcode.js is already somewhere else on your page, you don’t need to paste it again, you only need to paste the <healcode-widget> tag.
 
The Advanced Way (for single-page website applications and/or dynamically injecting a widget into a page using Javascript):
 
  1. Contact a support representative to activate the feature on your account.
  2. In the settings for any supported widget, you should see something similar to the following where the old deploy code was:

     
  3. If it’s not on your page already, paste the healcode.js <script> tag in a part of your page that will load on an initial browser load (preferably within in the <head> tag).  If you’re using a CMS, check out our existing guides for installing HealCode Links for additional info with regards to adding this <script> tag.  The reason for this is because healcode.js auto-initializes the supporting custom element functionality once the page has finished loading (or on DOM ready, in developer-speak).  You can see if initialization has occurred and finished by checking "window.hcInitialized === true" in Javascript.

    If you’re still injecting the healcode.js <script> tag after the page has finished loading, you can use the following Javascript to manually initialize: window.healcodeInitialize(window.hcWidgetCollection);

  4. Paste a <healcode-widget> tag on your page where you would like the widget to load.  If you’re dynamically injecting widgets into the page, please make sure this occurs after the healcode.js initialization process has finished (see step 3 for how to check).  Also, make sure the <healcode-widget> tag has all of its data attributes defined prior to injection into the page.
 
That’s it!  Here’s an example of it in action:
 
(paste codepen.io embeddable example here) <p data-height="380" data-theme-id="15854" data-slug-hash="xGdooW" data-default-tab="result" data-user="Absoludacris06" class='codepen'>See the Pen <a href='http://codepen.io/Absoludacris06/pen/xGdooW/'>HealCode Custom Element Deployment Example</a> by Nicholas Saldivar (<a href='http://codepen.io/Absoludacris06'>@Absoludacris06</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
Have more questions? Submit a request

Comments

Powered by Zendesk