24TTL's Where-to-Buy Online solution allows manufacturing brands to request product offers from online retailers and display them as logo links on a widget on their site. This allows customers to be redirected from the product card on the brand's site directly to the product card on the retailer's site without leaving the page, providing a seamless buying path.
When a user visits a product page on a brand site and clicks the "Where to Buy" button, the widget sends a request to the 24WTB API, which returns in response a json with offers for that product on various retailer sites, which stores information about price, currency, availability in the online store, link to the product page and other parameters. If the offers are available for display, the system gives the answer "200" and the widget renders a Json file in the form of links-logos of different retailers. If there are no offers, the system gives the answer "204" and the widget displays a phrase about the lack of offers.
The 24WTB widget is used to visualize online retailer offers for a specific brand product.
Offers are displayed when the visitor clicks the "Where to Buy" button (or any other name). The widget call contains parameters defining the brand, productID and product mapping type, by which a request is made to the system and a list of available offers is displayed.
The widget's functions are as follows:
The initialization widget method is to configure the settings of the widget appearance, as well as the data of the product for which offers are displayed on the page. During widget initialization a request is made to the server part of the service, which contains data on the product, then in response comes JSON-object with the available retailers’ product offers. Widget script generates a layout based on this data and visual settings of the widget and displays it on the page of the site, where the widget is used. The widget is inserted to the page element, which is also specified in the initialization settings.
Besides data receiving through widget it is possible to receive data when you address to API of service in JSON format. At a request it is necessary to specify some obligatory parameters which will allow to receive information for the necessary product. More information about these parameters is described in section "Getting the list of product offers via API".
You need to place two script tags at the bottom of the site to integrate the widget:
1 - Connecting the widget script.
2 - Widget initialization.
The connection code of the widget script looks like this:
<script src="https://widget.24wtb.com/wtbWidget.js"></script>
An example of widget initialization code:
<script>
var wtbWidget = new WtbWidget();
wtbWidget.init({
el: ".product-gallery__light-button-right",
licenseId: '4c579eab-adb2-4187-bb4b-cc69f01a08bd',
productId: ‘3838782532436',
skuType: 'ean',
buttonClass: 'btn',
buttonText: 'WHERE TO BUY',
widgetLinkColor: '#00b8ac',
widgetListColor: '#00b8ac',
footerBg: '#00b8ac',
footerColor: '#fff',
});
</script>
Widget is ready to work!
Parameter | Required | Type | Default value | Description |
licenseId |
Yes | String | null |
Brand ID in the 24WTB service |
el |
No | String | .wtb-container |
Selector of the element in which the widget will be inserted |
skuType |
No | String | mpn |
Product ID type (mpn, ean, brandSku available) |
productId |
Yes | String | null |
Product ID |
buttonText |
No | String | WHERE TO BUY |
Text on the widget call button |
buttonClass |
No | String | null |
css-classes of the button to call the widget |
buttonStyle |
No | Object | {} |
Widget call button css |
widgetClass |
No | String | null |
widget css classes |
widgetLinkColor |
No | String | #ccc |
The color of the icons to go to retailers inside the widget |
widgetListColor |
No | String | #000 |
The color of the text in the list of available offers |
footerColor |
No | String | #736c64 |
Text color in the widget footer |
footerBg |
No | String | #ddd |
Background color in the widget footer |
noShopsText |
No | String | no offers |
Text in the widget in the case of no offerers |
available |
No | String | in stock |
Signing the product when it is in stock |
not available |
No | String | out of stock |
Signing the product when it is out of stock |
showPrice |
No | Boolean | false |
Whether to show the price of products in the widget |
showAvailability |
No | Boolean | false |
Whether to show the availability status in the widget |
showAwailableOnly |
No | Boolean | true |
Whether to show only available items in the widget |
You can get a list of product offerings through the 24WTB API.
The URL example below contains several variables that are needed to get product offers. Based on these variables, 24WTB will display a list of online store offers for the product on the widget on the brand site.
https://core.24wtb.com/api/v1/{license_id}/online/product?{product_sku_type}={product_sku_value}
where:
{license_id} = unique ID provided when registering with 24WTB Online
{product_sku_type} (acceptable values - mpn, ean or custom_id) = The type of data used to map the product
{product_sku_value} = MPN (Manufacturer Part Number) or EAN (European Article Number/ barcode) or custom_id, unique product code on the brand's website)
Name |
Data type |
Description |
license_id |
Integer |
Unique brand identifier in the 24WTB system |
MPN |
String |
Manufacturer Part Number |
EAN |
Integer |
European Article Number/ barcode |
custom_id |
Integer |
Unique product code on the brand's website |
Examples: JSON with MPN and EAN
https://core.24wtb.com/api/v1/1957063e-e342-4eba-b42b-e0ac9c9aed97/online/product?mpn=BM235CLI
https://core.24wtb.com/api/v1/1957063e-e342-4eba-b42b-e0ac9c9aed97/online/product?ean=3838942142796
If you plan to track campaigns (e.g., various media, ads, selling leads, etc.) from which users go to your own landing page where the "Where to Buy" button is located, you need to add a CID parameter to the media URLs and implement the following script to have the CID value captured and displayed on the 24WTB dashboard.
What is CID?
24WTB offers the ability to link your tracking system to 24WTB's lead and sales tracking feature. You'll be able to see overall information on users who clicked over from an individual ad campaign and make in-depth insights into user behavior.
For detailed information and technical documentation, please contact your Custom Success Manager.
For hands-on examples, we have developed the Sandbox where you can play with the parameters.