the_quint_recommendation_widget

Steps to install the widget in your app:-

1. Go to your project directory in terminal.
2. Run the following command :

npm i the_quint_recommendation_widget

Steps to use the widget:-

• Go to the file where the widget is required.
• Import the widget using the following piece of code :

import { recommendationsWidget } from 'the_quint_recommendation_widget
/dist'; 

• Call the "recommendationsWidget" with all the parameters mentioned below in the Sample Code Description.

Sample code:

1. <div className="wru_recommendations--gridView">
2.        {
3.        recommendationsWidget(
4.            {
5.            recommendation: "article",
6.            heading: "Recommended for you",
7.            userId: "xxxxx-xxxxx",
8.            merchantId: "123456",
9.            articleId: "xxxxx-xxxxx"
10.            },
11.            "wru_recommendations--gridView",
12.            "gridView",
13.            "gumlet.assettype.com"
14.        )
15.        }
16. </div>

Sample Code Description:

• Line 1 - It's the div where the widget is to be appended.
• Line 3 -> Line 14 - It's the function that needs to be called for appending the widget.
• Line 5 -> Line 10 - These are the parameters that are required for the api call.
  • recommendatiion : It's the type of recommendation, i.e., article or user, etc.
  • heading : It's the heading you want on the top of the widget.
  • userId : It's users id who is browsing the content.
  • merchantId : It's the id of the organization using our widget.
  • articleId : It's required for the article based recommendation.
• Line 11 - This is the class name where the widget is to be appended.
• Line 12 - This is the orientation of the widget. (Should be "gridView")
• Line 13 - This is where the images of the widget are hosted
• Note ---> The widget will append only once in the specified classname (in this example "wru_recommendations--gridView")in a single page. If two or more widgets are required in a single page, different unique classnames are to be provided for each widget(For example - "wru_recommendations--gridView--1", "wru_recommendations--gridView--2" and so on).