Compilers
Widgets - How to embed

This tutorial will show you how to create and integrate a Compilers module widget. For detailed information about integrating Sphere Engine Compilers Widget go to the Compilers Widget integration documentation.

Important: To successfully go through this tutorial you need to have a working Sphere Engine account. Register for a Sphere Engine account by filling in the sign-up form.

Step 1: Logging in to the panel

After creating your account and successfully logging in, you will be redirected to the client's dashboard.

Step 2: Creating a new widget

Next, go to the widget configuration page (Menu > Compilers > Widgets). Press the Create widget button to create a new widget. A new item will appear in the list of widgets, for example: 9e1e25c224b32a941cccc468d284e148.

Step 3: Configuring the new widget

After clicking on the name of the new item in the list of widgets (e.g. 9e1e25c224b32a941cccc468d284e148), a page with widget's settings will be displayed. Adjust the settings to your needs and save changes.

Step 4: Integrating the new widget with your website

The process of integrating the widget with the website is identical to the one described in the Sphere Engine Compilers Widget overview section.

In the Sphere Engine client panel's Compilers>Widgets>WIDGET HASH>Widget integration section find your customized snippet of JavaScript code that should be placed directly after the <body> tag on the website you want to integrate the widget with:

<script>SEC_HTTPS = true;
SEC_BASE = "compilers.widgets.sphere-engine.com"; 
(function(d, s, id){ SEC = window.SEC || (window.SEC = []);
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; 
  js.src = (SEC_HTTPS ? "https" : "http") + "://" + SEC_BASE + "/static/sdk/sdk.min.js";
  fjs.parentNode.insertBefore(js, fjs);   
}(document, "script", "sphere-engine-compilers-jssdk"));

SEC.ready = function(f) {
  if (document.readyState != "loading" && document.readyState != "interactive") f(); 
  else window.addEventListener("load", f);
};
</script>

Next, place the following HTML code in the exact place in which you want to display the widget:

<div class="sec-widget" data-widget="<personalized_widget_code>"></div>

Step 5: The widget is ready to use

After visiting the site on which the widget has been embedded, the widget will be displayed and ready to use.

  Contents