Widget Embedding API
To embed the Nibble widget in any web page, you need to add two elements: a <script> tag to load the Nibble chat widget
JavaScript, and one or more <nibble-button> tags that will position Nibble buttons at appropriate places in your page.
Script Tag
Simply include the following line in your page header or other appropriate location:
<script src="https://cdn.nibble.website/widget/nibble-button.min.js"></script>Nibble Button
Include the button tag wherever the Nibble button should appear. For example, on a Product Details Page, we recommend adding it below the ‘Add to Cart’ button. On a cart page (for cart negotiations), we recommend adding it above your ‘Checkout’ button.
<nibble-button api-key="XXX" negotiation-type="product" product-id="XXX" variant-id="XXX" product-tags="category:Example,cohort:Example"...></nibble-button>Attributes - All Negotiation Types
The button supports the following attributes on all page types (product and cart)
| Field | Required? | Description |
|---|---|---|
api-key | Yes | Your API Key, as provided to you by Nibble. |
negotiation-type | No | The negotiation type which can either be set to product or cart. Optional, defaults to product if not specified. |
language | No | The preferred language for the current user, represented in IETF Language Tag format (e.g. en-GB or it-IT). The button and chat will use this language if your Nibble plan supports it. Defaults to en. |
Attributes - Product Negotiations
When the button is intended for product negotiation, e.g. on a Product Details Page (and negotiation-type is set to
product), the following attributes are supported:
| Field | Required? | Description |
|---|---|---|
product-id | Yes | The ID of the product in question. This is returned to you in the Nibble details following a successful negotiation, so that your system knows which product to add to cart. |
variant-id | No | If your store’s products are subdivided, e.g. into variants or colourways, you can specify a variant Id for the currently active variant. This attribute can be changed while the Nibble button is active on a page. The value is returned to you in the Nibble details following a successful negotiation, so that your system knows which product to add to cart. |
product-tags | No | Comma-separated list of category and cohort tags. These tags are string identifiers that denote what product categories your product is in, and what cohorts the user is in (if any). These products and cohorts are used in combination with the other data provided (such as product Id), and the rules defined in your Nibble account, to determine if the Nibble button should show and how any negotiations are configured. See below for more details on tags. |
Attributes - Cart negotiations
When the button is intended for cart negotiations, it needs to be configured with the cart total so the that appropriate rules are activated. The supported attributes are:
| Field | Required? | Description |
|---|---|---|
cart-value | Yes | The total value of all items in the cart (before shipping and taxes). Decimal rendered as a string. |
currency-code | Yes | The ISO 4217 currency code of the cart’s current currency. |
Product Tags
The product-tags attribute on the widget embed, if present, should be a string containing one or more tags, comma separated. The Nibble Widget currently supports two types of tag:
| Tag | Description |
|---|---|
category:name | Product Category Tags |
cohort:name | User Cohort Tags |
Multiple tags, including multiple tags of the same type, can be specified in the product-tags attribute. Category and cohort names can contain any text except for comma and double quote.
Product Category
If your ecommerce site supports product categories or collections, the relevant product category for the product in question should be passed to the Nibble Widget. If a product exists in more than one category, or in a hierarchy of categories, all categories should be included. For example, if the product is a Men’s Hat, it could be in the categories: Menswear, Accessories, Headwear, and Hats. As such the product tags attribute could be as follows:
product-tags="category:Menswear,category:Accessories,category:Headwear,category:Hats"Cohort
If your ecommerce site supports user cohorts, and the current user is in one or more cohorts, you can pass these to the Nibble Widget. As with product categories, if a user is in more than one cohort, all cohorts should be included. For example, if a user is in the ‘VIPs’ cohort, and also in the ‘Teens’ cohort, the product tags attribute could be as follows:
product-tags="cohort:VIPs,cohort:Teens"Combining
Both product category and cohort tags should be listed in a single product-tags attribute. So, using the above examples, if the same user was looking at the same hat, the product-tags attribute should be as follows:
product-tags="category:Menswear,category:Accessories,category:Headwear,category:Hats,cohort:VIPs,cohort:Teens"About Localization and Languages
It’s important that product category and cohort names match those specified in the Nibble Admin Site. As such, even if your ecommerce site supports multiple languages, the names specified in the product-tags attribute should be in the same language as the one used to configure your Nibble account in the Nibble Admin Site.