This article covers the implementation of both the News and Review Tiles.

Embedding the Tiles

When the business has either of the above Product Plan elements activated an additional tab, titled 'websites' is exposed in the platform on the location level. Only the location level shows this new tab as the tiles are individual to a location and meant for SMBs.

In the new tab the user can copy the snippets for both the Review tile and the Reviews tile.

(note: the user should add their own privacy policy URL in the settings for the Review tile.

Review Tile

• First party reviews are visible in the inbox, just like reviews from another channel.
• The review tile only includes reviews from Google, Facebook and 1st party.

Implement the tiles in a Single-page-application (SPA)

Introduction

The tiles work out of the box for server-side-rendered pages, but for pages that are rendered only once on start and then the browser window doesn't get re-rendered on click of a different page (= single page applications), there needs to be some manual configuration to make the tiles work. This is often the case for websites which use popular frameworks like React, Vue.js or Angular. 

Steps to follow

Step 1

Add the initial tiles-script to your html:

Step 2

Add the container div to your component inside the SPA:

The tiles won't start automatically with a SPA, because the script can't find the "<ub-widget-review>" element, because this will only be rendered at the execution of javascript.

Step 3

When going to the route with the tiles in the HTML, you need to call

The tiles should now show up and work properly.

Step 4

When going to a different route inside the SPA, you need to call 

on unmount of the store-locator component. This will make sure all components are correctly unmounted and can be started up properly again if the user comes back to the view.

Example

Here is an example repository with a React implementation with this tiles-component carrying most of the logic mentioned in the steps above.

Implement the Review tile by api

Verify if widget already exists, (snippet needs to be non-null)

GET  https://uberall.com/api/locations/$locationId/widgets?v=20191203

Create widget, e.g. for type Review

POST https://uberall.com/api/locations/$locationId/widgets?v=20191203&type=REVIEW

Update widget config

PATCH https://uberall.com/api/locations/$locationId/widgets?v=20191203{"widgets":[{"id": $widgetId ,"type":"REVIEW","config":{"language":"en","privacyPolicyUrl":"","reviewDirectories":["GOOGLE","FACEBOOK","WEBSITE_WIDGETS"]}}]}

Implement the News tile by api

Verify if widget already exists, (snippet needs to be non-null)

GET  https://uberall.com/api/locations/$locationId/widgets?v=20191203

Create widget

POST https://uberall.com/api/locations/$locationId/widgets?v=20191203&type=SOCIALPOST