Products: Embed Code

Embed Code

In this simple guide we will dissect the embed code and try to see different ways it can be applied to your webpage.

The first, most straightforward way is to simply copy the code provided in the product page. Here is some sample code:

<div class="onscribe" data-product="8d81170371b78c149981515c0fb86266"><!-- --></div><script type="text/javascript">(function(w,d) { var el = d.getElementById('onscribe-embed'); if( el == null ){var o = d.createElement('script'); o.type = 'text/javascript'; o.async = true;o.id = 'onscribe-embed'; o.src = '//onscri.be/embed.js';var s = d.getElementsByTagName('script')[0]; s.parentNode.insertBefore(o, s);}})(window, document);</script>

That'a basically two parts, the div container that will host the buttons

<div class="onscribe" data-product="8d81170371b78c149981515c0fb86266"><!-- --></div>

and the JavaScript library that will generate the buttons; in the format given it is loaded asynchronously but it can be easily written with a standard script tag, as such:

<script type="text/javascript" src="https://onscri.be/embed.js">

Given that the JavaScript library can be loaded asynchronously, it can be decoupled from the containers. In fact you may have multiple containers in your webpage and the library is smart to render buttons in all of them.

This means you only have to load the JavaScript once regardless of how many times it is being used or how the markup is rendered. Only thing to consider is that the markup of the container(s) needs to be available when the library starts executing.

If you're using module loaders like Require.js, you are fine to add it in your app's deps and run it after your app is loaded.

Read on about the available plugins, for more ways to integrate Onscribe in your website.