Mozrest JS SDK documentation

Introduction

Mozrest SDK JS allows you to embed Mozrest features inside your application. The JS SDK will insert the content inside the tag “Div”, allowing you to overwrite the css styles to make it match your style.

The JS SDK provides you help to handle the content inside the div and allows you to insert the different features and pages wherever suitable for your interface and flows.

Authentication

Mozrest will provide you with a distributor API Token and partnerId.

When a restaurant is created in Mozrest, a unique accessKey is generated for the restaurant and provided to the partner on the API response.

The partnerId and accessKey are used as configuration parameters when embedding the SDK in order to authenticate the request. Additionally, the venue id (id on the partner's side) must be set to show the content for a particular restaurant.

As security measure, Mozrest will validate if the domain embedding the SDK is authorized for the partnerId.

SDK embed example

              
                <script type="text/javascript">
                    const moz = mozrest.init('your-specific-id', {
                        partnerId: 'your-partner-id',
                        accessKey: 'venue-access-key',
                    });
                    moz.showPage('Listing');
                </script>

Creating a venue

Find the specifications to create a venue on the Mozrest API Documentation.

Payload example

              
                {
                    "name": "Venue SDK Test",
                    "code": "VenueID on partner side",
                    "country": "GB",
                    "address": "Picadilly Circus",
                    "city": "London",
                    "postalCode": "W1J 9LL",
                    "phoneNumber": "442072343456",
                    "email": "[email protected]",
                    "url": "http://yourvenueurl.com",
                    "latitude": "51.56797",
                    "longitude": "-0.28122",
                    "currency": "GBP",
                    "timezone": "Europe/London",
                    "sdkAccess": "true"
                }

It is very important to provide the parameter "sdkAccess" when creating the venue to automatically generate an accessKey and enable the Listing&Review product.

Manage license

Once the venue is created, you can manage the license activation for Listing&Review through Mozrest API.

Find the specifications on the Mozrest API Documentation.

It is very important to provide the parameter "feature" with the value "listing"to enable the Listing&Review product.

Data master source

All the data sent to the different platforms may have a different source. For that reason, Mozrest maps each field to a source. This means that the field can be managed directly at its source.

Each field is defined with a set of rules that indicates how the behaviour of this field will be:

Read_only: It will be shown on the form as read only.
Hide: It will not be shown on the form but will remain within Mozrest for sync purposes.

As an example, let’s assume that the ‘Business name’ is managed on the partner’s interface, this will mean that the ‘Business name’ property cannot be modified through the Mozrest JS SDK.

In this example the configuration at Mozrest will be:

Field: business_name.
Rule_type: read_only
Source_name: restaurant_name

Get Started

1 - Place following scripts in your HTML page

              
                  <link rel="stylesheet" href="https://sdk.mozrest.com/latest/sandbox/mozrest-sdk.min.css" />
                  <script src="https://sdk.mozrest.com/latest/sandbox/mozrest-sdk.min.js" />

2 - Choose where to render the page

Add a div in your HTML where the Mozrest content is going to be inserted.

              
                  <div id="your-specific-id"></div>

3 - Display the selected page

              
                <script type="text/javascript">
                    const moz = mozrest.init('your-specific-id', {
                        partnerId: 'your-partner-id',
                        accessKey: 'venue-access-key',
                    });
                    moz.showPage('Listing');
                </script>

Webhook

Mozrest offers the option to update the venue information for the Listing&Review product with a simple webhook call.

Find the specifications for the webhook on the Mozrest API Documentation.

Payload example

Let's say we want to update the venue description.

              
               {
                    entity: "listing",
                    entityId: "123456", //Id of the venue on the partner's side
                    action: "update",
                    data: {
                        description: "My new long description for the venue"
               }

Available parameters

You can find here a deeper documentation about all the webhook available parameters with examples.

Available pages

As mentioned before, each page can be embedded in the partner’s interface individually. The current available pages are:

Listing

Profile management	All the data related to a listing.	key: Listing
Analytics	Listing insights.	key: ListingAnalytics

Reviews

Comments management	Manage all reviews from the different channels	key: ReviewsPage
Analytics	Reviews insights	key: ReviewAnalytics

Settings

Reply templates	Define reply templates based on rating and language	key: ReplyTemplates
Notifications	Manage notifications preferences	key: Notifications

Customizations

Mozrest JS SDK allows you to overwrite the default styles to make the interface look like your own platform.

The following elements can be customized:

Element	Description	Example
Font family	Font applied to all texts	`:root { --font-family: 'Roboto', monospace; }`
Buttons styles	Styles for the buttons	`.mz-btn { border-radius: 1rem; border: 1px solid #74c043; }`
Buttons hover styles	Styles for the buttons hover state	`.mz-btn:hover { border: 2px solid black; background-color: white; }`
CTA Primary colors	Styles for the main CTAs	`:root { --cta-primary: #74c043; --cta-primary-text: #fff; --cta-primary-hover: #fff; --cta-primary-text-hover: #00a84f; }`
CTA Secondary colors	Styles for the secondary CTAs	`:root { --cta-primary: #74c043; --cta-primary-text: #fff; --cta-primary-hover: #fff; --cta-primary-text-hover: #00a84f; }`
Title color	Colors for the section title (title visibility can be parametrized)	`:root { --text-title: #095738; }`
Primary color	Primary color definition	`:root { --text-primary: white; }`
Secondary color	Secondary color definition	`:root { --text-secondary: rgb(15, 163, 227); }`
Labels color	Colors for the input labels	`:root { --text-label: gray; }`
Input color	Colors for the input texts	`:root { --text-input: black; }`
Active tab	Color for the active tab	`:root { --state-active: #095738; }`
Card	Styles for card wrapping the content	`.mz-card { background-color: black; border-radius: 0; }`

Examples

Find below a set of examples to see Mozrest JS SDK in action and with different customizations

Section	Default style	Example style 1	Example style
Listing	Default	Example 1	Example 2
Reply Templates	Default	Example 1	Example 2

You can download the set of examples in the button below

Download examples