Widget Setup and Integration

The following widget setup must be completed before implementing the functionality of the individual widgets.

The following steps use "optty-easy-checkout-widget" as an example of initialising a widget.

To initiate the optty widgets an integration script needs to be added to the e-commerce site’s html page.

// Some code
<script>
(function (w,d,s,o,f,js,fjs) {
  w['Optty-Widget-SDK']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
  js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
  js.id = o; js.src = f; js.async = 1;
    fjs.parentNode.insertBefore(js, fjs);
}(window, document, 'script', 'mw', 'https://widgets.qa.optty.com/widget-loader.js'));

// Add widget init function - example mw(‘footer-widget’, { mode: ‘preview’ }). 11 // See the next section for more information
</script>

Replace https://widgets.qa.optty.com to https://widgets.optty.com when you from the Testing Sandbox to Production

The snippet above dynamically adds another script tag, setting src to 'https://widgets.qa.optty.com/widget-loader.js'

It asynchronously loads the contents into the page. This script needs to ideally be embedded at the bottom of the HTML page.

After adding the widget initiation code, you will need to call the init widget and pass in some configuration objects that will be used to make requests to the Optty API. These are used to fetch the widgets configuration data before you can begin to utilise other widgets.

<script>
    // … widget initiation script …
    mw('init', {
        token: "CUSTOMER SESSION TOKEN",
        currency: “string”,
        initialAmount: number
        mode: “live”
    });
</script>

Always specify mode as "live"

Step 2 - Embedding widgets into HTML Pages

Embedding the different Optty widgets into the pages of your site requires adding a div tag. Optty utilises the concept of widget regions and HTML class attributes to uniquely create an instance of any optty widget in a particular region of the site.

<HTML>
<!-- Easy Checkout Widget -->
<div class="optty-easy-checkout-widget"></div>

</HTML>

2.1 Individual Widgets Initialisation

Optty provides you with different widgets to allow you to display them in different parts of your websites allowing easy integration for calls to action or to simplify the checkout process implementation. This is where a majority of the logic will sit on your site especially when using the more complex checkout widgets.

<script>
  //[LOAD THE WIDGETS INTO THE DIVS]
  //---- Sample Script for product optty easy checkout widget ----
  mw('optty-easy-checkout-widget', {
    amount: 50
  });

</script>

PreviousWidgets Overview NextEasy Checkout Widget