# Implementing News and Reviews Tiles

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

**Product Plan**

- In order to enable the news tile both 'posting' and 'website_widgets' needs to be activated
- In order to enable the reviews tile both 'inbox' and 'website_widgets' needs to be activated.


**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.)

![Embedding tiles image](/assets/embedding-tiles.c4beb97fc2c0b47e33d981f0917cf70fb3dac042bf78a0631722d4c6fe78a954.33f780a6.png)

**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:


```html
<script src="https://widgets.uberall.com/assets/website-widgets.bundle.js" type="text/javascript"></script>
```

#### Step 2

Add the container div to your component inside the SPA:


```html
<ub-widget-review>
    data-key="YOUR_WIDGETS_KEY"
    data-locationId="YOUR_LOCATION_ID"
    // any other customization options
</ub-widget-review>
```

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


```js
window.startWebsitesWidgets();
```

The tiles should now show up and work properly.

#### Step 4

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


```js
window.unmountWebsitesWidgets();
```

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](https://github.com/uberall/website-widgets-spa-integration-example) is an example repository with a React implementation with [this tiles-component](https://github.com/uberall/website-widgets-spa-integration-example/blob/main/src/routes/RouteWithWebsiteWidgets.js) 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)


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

Create widget, e.g. for type Review


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

Update widget config


```bash
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)


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

Create widget


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