Naar de hoofdinhoud
API for Developers: Widgets
Feedback Company avatar
Geschreven door Feedback Company
Meer dan een week geleden bijgewerkt

Create

Creates a new widget. There are 4 types of widgets with several customisation options and use cases.

  • The "main" widget is the most basic use case, it shows a shop's average score, stars, and the amount of reviews. Optionally it shows 1 or 2 random reviews.

  • The "bar" widget shows a shop's average score, stars and the amount of reviews in a compact bar which can be handily placed above the navigation or as a break between sections. It fills up to 100% of the width of the parent container.

  • The "product-summary" widget shows a product's average score, stars and the amount of reviews in a very concise way. This widget is most suited to be included directly beneath the title of a product on a product page, and once for each product on product category pages and related product sections.

  • The "product-extended" widget shows a product's average score, stars, the amount of reviews, the score distribution, and all product reviews in a rollable sidebar, pop-up or inline block depending on your preference. In the case of a sidebar or pop-up display type, the widget is shown by clicking on a "product-summary" widget for the same product which should also be on the same page. This widget is most suited to be included on a product page.

After creating your widget, you need to use an embed code to place it in your webshop. See the embed section below for more details.

Request

Headers

The "Authorization" header for this API method contains an <access_token> placeholder. Replace it with the value of an actual access token.

Name

Value

Authorization

Bearer <access_token>

URL

Body

This API method accepts a JSON body in the request. The top-level JSON object should be a "Widget" object as described in the next section.

Widget

Name

Allowed values

Required

type

"main","bar","sticky","product-summary","product-extended"

Yes

options

(Depends on the widget type, see table below)

(Depends on the widget type, see table below)

Each widget type uses it's own Options object:

Widet type

Options object

Required

main

(A "MainOptions" Object

Yes

bar

-

No

sticky

-

No

product-summary

-

No

product-extended

(A "ProductExtendedOptions" Object

Yes

MainOption

Name

Allowed values

Required

size

"big","small"

Yes

amount_of_reviews

0, 1, 2

Yes

ProductExtendedOptions

Name

Allowed values

Required

display_type

"inline", "popup", "sidebar"

Yes

Example

 {
"type": "main",
"options": {
"size": "small",
"amount_of_reviews": 2
}
}

Responses

Headers

Name

Value

Status code

201

Status message

Created

Example

 {
"success": true;
"widget": {
"shop_id": 1234,
"options: {
"amount_of_reviews": 2,
"size": "small"
},
"create_timestamp: "2018-04-01T00:00:00z",
"uuid": "56c7e115-2e22-46a5-b0c2-fcc386b4ad6",
"last_access_timestamp": null,
"id": 5678,
"type": "main"
}
}

Embed

Returns HTML templates for embedding widgets. The "main" and "bar" widgets use the "Default" HTML template, and the "product-summary" and "product-extended" widget use the "Product" HTML template. Each template has several placeholder tokens that you need to replace to get an executable embed code for a widget instance.

It's recommended to develop your integration to retrieve an embed code once every 24 hours and store a cached copy locally. As long as you replace the required placeholders dynamically, an updated embed code will continue working as expected.

Default

URL

Placeholders

Name

Description

Required

{uuid}

The uuid of the widget to embed.

Yes

{prefix}

A unique prefix such as a randomly generated uuid

Yes

Example

<!-- Feedback Company Widget (start) --> <script type="text/javascript" id="__fbcw__{prefix}{uuid}"> "use strict";!function(){ window.FeedbackCompanyWidgets=window.FeedbackCompanyWidgets||{queue:[],loaders:[ ]};var options={uuid:"{uuid}",version:"1.2.1",prefix:"{prefix}"};if( void 0===window.FeedbackCompanyWidget){if( window.FeedbackCompanyWidgets.queue.push(options),!document.getElementById( "__fbcw_FeedbackCompanyWidget")){var scriptTag=document.createElement("script") ;scriptTag.onload=function(){if(window.FeedbackCompanyWidget)for( ;0<window.FeedbackCompanyWidgets.queue.length; )options=window.FeedbackCompanyWidgets.queue.pop(), window.FeedbackCompanyWidgets.loaders.push( new window.FeedbackCompanyWidgetLoader(options))}, scriptTag.id="__fbcw_FeedbackCompanyWidget", scriptTag.src="https://www.feedbackcompany.com/includes/widgets/feedback-company-widget.min.js" ,document.body.appendChild(scriptTag)} }else window.FeedbackCompanyWidgets.loaders.push( new window.FeedbackCompanyWidgetLoader(options))}(); </script> <!-- Feedback Company Widget (end) -->

Product

URL

Placeholders

Name

Description

Required

{uuid}

The uuid of the widget to embed.

Yes

{prefix}

A unique prefix such as a randomly generated uuid.

Yes

{product_external_id}

The id of the product in your webshop.

Yes

{product_name}

The name of the product in your webshop.

Yes

{product_url}

The url of the product in your webshop.

Yes

{product_image_url}

The url of an image for the product in your webshop.

Yes

Example

<!-- Feedback Company Widget (start) --> <script type="text/javascript" id="__fbcw__{prefix}{uuid}"> "use strict";!function(){ window.FeedbackCompanyWidgets=window.FeedbackCompanyWidgets||{queue:[], loaders:[]};var options={uuid:"{uuid}",version:"1.2.1",prefix:"{prefix}", urlParams:{product_external_id:"{product_external_id}"}, templateParams:{product_name:"{product_name}",product_url:"{product_url}",product_image_url:"{product_image_url}"}} ;if(void 0===window.FeedbackCompanyWidget){ if(window.FeedbackCompanyWidgets.queue.push(options), !document.getElementById("__fbcw_FeedbackCompanyWidget")){ var scriptTag=document.createElement("script");scriptTag.onload=function(){ if(window.FeedbackCompanyWidget)for(;0<window.FeedbackCompanyWidgets.queue.length;)options=window.FeedbackCompanyWidgets.queue.pop(), window.FeedbackCompanyWidgets.loaders.push(new window.FeedbackCompanyWidgetLoader(options)) }, scriptTag.id="__fbcw_FeedbackCompanyWidget",scriptTag.src="https://www.feedbackcompany.com/includes/widgets/feedback-company-widget.min.js", document.body.appendChild(scriptTag)} }else window.FeedbackCompanyWidgets.loaders.push(new window.FeedbackCompanyWidgetLoader(options)) }(); </script> <!-- Feedback Company Widget (end) -->
Was dit een antwoord op uw vraag?