"Inline" Product Widget Implementation Guide

Overview

This guide provides an outline of best practices for implementing Destini’s Product Widgets within a webpage. This implementation method will result in your widget immediately loading within any webpage in which you place an embed script. Alternatively, if your intention is to launch your Product Widget within a pop-up or a window overlay, please read our support article for implementation of a widget in a pop-up modal.


Embed scripting within your webpage

The embed script provided to you within the CMS Widget Builder needs to be placed anywhere within the <body> of your webpage, but we suggest closer to the end of the page, before </body>. 

Example:

<script src="//destinilocators.com/[CLIENT NAME]/pdpwidget/install/"></script>

 

*Note that you will replace [CLIENT NAME] with your client account name.

 

Create a container <DIV>

The install script needs to know what <DIV> element on your page it will be populating the widget into.  Create an empty <DIV> with a unique ID. Recommended: <DIV ID="destinidiv"></DIV>

 

Add "onload" scripting to the bottom of your page

Right before the </body> tag, you need to include some simple scripting that will load the widget into the container <DIV>.  This scripting must go after the widget install script.

<script>
$(document).ready(function() {
destini.init("destinidiv");
  destini.loadWidget("ASSOCIATIONID");
});
</script>

Depending on what ID you supplied the container <DIV> (above), you may need to replace "destinidiv" with that container ID.  The ASSOCIATIONID is the widget Association ID you set when creating the Widget.

You may need to adjust this example script to be compatible with your site.  This example uses jQuery, but you may need or want to implement this in a way that doesn't use jQuery.


Once your widget script is embedded within the designated page, you can continue to make edits to the product selection and styling of your widget from within your Destini CMS. These changes will immediately propagate to your live widgets without ever needing to make updates your embed script. 


Click here for more information on creating a new widget.

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request