Documentation
- Platform Integrations
- Merchant Operations
- Marketing & Compliance
Getting Started with Widget
Loading the Widget
In order to use the Clyde widget you’ll first need to include it on any page where a user will be adding product protection. This is best done by loading the script in your page’s <head>, and initializing the Clyde object at the end of the <body>. Once the script has loaded you’ll need to initialize it by calling Clyde.init() with an options object that must include your client key along with any other appropriate options. Once the widget is initialized it exposes a number of functions you can use to interact with the various calls-to-action it provides.
<script src=”https://js.joinclyde.com/widget/”></script>
Using the Widget
Clyde.init(options, callback)
Use Clyde.init() to initialize the widget on your page and register callbacks for certain user interactions. The function takes an `options` object with the following keys accepted:
key (required) (string): your API client key, used for fetching contract info for products.
defaultSelector (string): default css selector for appending Clyde’s product page prompt.
type (string): product page prompt type. Must be one of 'simple', 'select', 'cart'.
Type options
For more information on 'type', review Customizing your Offering
environment (string): the environment you are using. Defaults to 'production'. Pass in 'sandbox' to use Clyde's testing environment while you're getting set up.
baseUrl (string): a base URL that requests will be sent to. Use this if you want to use your server as a proxy to load contract information. Requests should be forwarded to and from 'https://sandbox-api.joinclyde.com' or 'https://sandbox-api.joinclyde.com', depending on your environment. Be sure to forward request headers.
skuList (array): optionally provide a list of SKUs that will be used in an initial contract load when the Clyde object initializes. This is not necessary, but can improve performance when selecting a product because the product's information is pre-loaded.
onShowModal (function): a default callback to be triggered when the modal is shown.
onCloseModal (function): a default callback to be triggered when the modal is dismissed.
onSelectedContract (function): callback to be triggered when a user selects a contract.
The init function accepts an optional callback as a second argument that runs after initialization finishes. You can use this, for example, to call Clyde.setActiveProduct() on the default product on the page.
setActiveProduct(productSku)
setActiveProduct() will load the contracts Clyde has matched to your product. In the case that no contracts are available for the provided product, no prompts will be displayed. Once a product has been fetched its contracts will be stored in memory on the page, so even if a user is switching between products API requests are kept to a minimum.
getSelectedContract()
getSelectedContract() returns the currently selected contract.
getActiveProduct()
getActiveProduct() returns the current active product.
appendSelector(selector, shouldHide)
appendSelector() appends the product page prompt to the specified selector. If a default selector is specified in init() you don’t need to invoke this function.
showModal(openCb, closeCb)
showModal() displays the Clyde modal. The two optional callback arguments can be used to override the default callbacks that fire when the modal is opened and after this instance of the modal is closed, respectively.
Using the Widget on Shopify
If you're using Clyde's Shopify app and the widget for a custom front-end integration, things work a little differently. Shopify partners provide Shopify variant IDs instead of product SKUs when calling `setActiveProduct`, and the return value of `getSelectedContract` includes a `shopifyVariantId`, so you can easily add the right variant to your cart. This also affects the optional `skuList` init option.