Integrating into the platform using the Widget

The widget is a pure client side solution allowing members to integrate with Protect Group.

The idea behind it is to place our refundable content on your site, and provide actions that will call our api on your behalf in just a few lines of javascript.

Installation & Initialization

This is the installation of the widget.

Just copy and paste this at the bottom of your master layout page if you have one, or at the bottom of each page that needs to use it, if you don't have one.

It should be placed just before the closing </body> tag, within a <script> tag.

This is the initialization of the widget. It should be placed direcly below the installation script inside the same <script> tag.

Please ensure you update the vendorCode value to the one provided to you for the test/prod environments.

When you are ready to move to production, you should remove the environment and debug properties. They are defaulted to production values so you only need them when testing

Important!

Calling the refundableSale action on the widget will not work until your test/production domains have been configured to access to our api. This is a security measure designed to replace not providing your api key, like you would when calling our api from your backend code.

When you are ready to integrate the widget we will configure your domain to allow access. Please contact your Commercial Manager, providing your test and production domains.

Content Placement

Once the widget has been installed and initialized, you simply need to add a <div> element to your page with an id of 'refundable-container'. The widget will then place the refundable content inside that element.

Picture

Init Properties

Below is a description of each property in the widget init action

Actions

Actions allow you to interact with the widget at runtime in just a few lines of javascript

Events

The widget fires events when it is initialized and when any of it's internal state changes.

Demo

We have a demo html file that can be downloaded and opened directly in your browser. The file provides examples of installing the widget and calling some of the actions to demostrate it's behaviour.

GET DEMO

Action Not Available

You see an error in the console that the [actionYouCalled] is not available

Cause: You are calling an action on the widget before the widget has finished it's initialization

This can happen if you attempt to call an action immediately after calling init, in the same script block

Fix: Wrap the action call inside the PgWidgetLoaded event