Check visibility
Rank #1 on Google Maps and be the Local Leader
Tracking
Daily Keyword Rank Tracker
Local SERP Map
Competitors Tracking
Planning
Post Scheduler
Media Scheduler
Content
AI Review Responder
AI Post Writer
Reports
Performance Reports
Reviews Statistics
Rank Tracker Reports
Agency-Focused
Agency Team Management
White Label
Protection
24/7 Listings Protection
Real-time Alerts
Management
Locations Bulk Editing
Location Groups
Collect Customer Reviews on Google
Collect Reviews
Overview
Increase Sales
Loyal Customers
Control Reputation
Product Reviews
Control Your Image
Building Trust
Integrations
Shopify
Baselinker
See All Integrations
Learn
Knowledge Base - Reviews
Local SEO Glossary
Knowledge Base
Integrate
Google Looker Studio
More
Success Stories
Blog
Pricing
Pricing
Sign in
Polish
Swiss
Check visibility Daily Keyword Rank Tracker Local SERP Map Competitors Tracking Overview Increase Sales Loyal Customers Post Scheduler Media Scheduler AI Review Responder AI Post Writer Performance Reports Reviews Statistics Rank Tracker Reports Agency Team Management White Label 24/7 Listings Protection Real-time Alerts Locations Bulk Editing Location Groups Product Reviews Control Your Image Building Trust Shopify Baselinker See All Integrations Knowledge Base - Reviews Local SEO Glossary Knowledge Base Google Looker Studio Success Stories Blog Pricing Pricing Sign in Sign up for Free

Add-ons

How to add a reviews widget to a website?

Add-ons

How to add a reviews widget to a website?

 

Among the widgets available in the application, you will find: 

  • widget for the main page
  • badge
  • rating form
  • widget in the email footer
  • product widget

 

Adding a widget to a page, rating form, badge, and widget in the email footer:

  1. Log in to the Rating Captain application and go to the Widgets tab.
  2. Select which widget you want to add to the page.
  3. Configure the appearance of the widget and click Save new widget.
  4. On the right side, below the widget preview, a Copy code button will appear. Click it.
  5. Paste the copied code where you want it to be displayed on the page.

 

 

You can create multiple versions of the widget and change their names to make it easier to identify. You can change the widget name by double-clicking the pencil icon.

 

Good to know: To disable the widget, click the slider (the widget will disappear from the page but will still be visible in the saved widgets).

 

 

Adding a product widget

To add a product widget, integration with the Rating Captain system is required. If you are not integrated, go to the Page tab and select the appropriate integration.

  1. Go to the Widgets → Product widget tab.
  2. Configure the appearance of the widget and click Save new widget
  3. Copy the code below the widget preview.
  4. Paste the code in the appropriate place in the page script and replace Your product id with the product ID from the store

 

 

In addition to the product widget, you can include a product rating form on the page.

  1. To add the form, create a rating form and save it (Widgets → Rating form). 
  2. Then, in the product widget tab, click the Add product rating form button located in the widget preview.
  3. Now click Update.

 

If the basic options for adding widgets are not sufficient for you, you can modify them using CSS.

  1. To do this, below the preview of the selected widget, click the Edit CSS button.
  2. In the CSS Code Editor, add your own styles.
  3. Click the Update button.

 

Remember! If you make changes to existing widgets on your page and want the changes to be immediately visible on the page, click the Refresh widgets button.

 

        
<script>
    var RatingCaptain_data_script = {
        /* REQUIRED | Email, on this address will be send message */
            "email": "{$order->email}",
        /* REQUIRED | Order in your system, this field should be unique */
            "external_id": "{$order->id}",
        /* Optional - Products in this order, each product must have id name and price. */
        "products": [
                    {
                        "id": "{$product->id}",
                        "name": "{$product->name}",
                        "price": "{$product->price}",
                        "imageUrl": "{$product->image}",
                    },
        ]
    }
</script>
<script src="https://api.ratingcaptain.com/js_v2/[Your website token]" async></script>

*Each item in bold must be properly configured depending on your system.
*Website token you can find here: Website page.
        
            
<script>
    var rc_products = {/literal}[{foreach from=$items item=i name=list}
{
    'id': '{$i->product_id}',
    'name': '{$i->name}',
    'price': '{$i->price_gross|money_without_currency}',
    'imageUrl': '{$i->product->images[0]->url|product_img_url:th100}'
},
    {/foreach}]{literal};
        var RatingCaptain_data_script = {
            "email": '{client_email}',
            "external_id": '{order_id}',
            "products": rc_products
        }
</script>
<script src="https://ratingcaptain.com/api/js_v2/[Your website token]" async></script>

*Website token you can find here: Website page.
            
        
            
<script>
    var rc_products = [{products}
        {
        "id": "{products.product_id}",
        "price": "{products.float_price}",
        "imageUrl": "{products.img}",
        "name": "{products.name}"
        },
    {/products}];
    var RatingCaptain_data_script = {
        "email": '{email}',
        "external_id": '{order_id}',
        "products": rc_products
    }
</script>
<script src="https://ratingcaptain.com/api/js_v2/[Your website token]" async></script>

*Website token you can find here: Website page.
            
        
            
<script>
    var RatingCaptain_data_script = {
            "email": "[[email]]",
            "external_id": "[[orderid]]"
    }
</script>
<script src="https://ratingcaptain.com/api/js_v2/[Your website token]" async></script>

*Website token you can find here: Website page.
            
        
            
{% block page_checkout_finish_rating_captain %}
    {% set ratingProducts = [] %}
    {% for lineItem in page.order.lineItems.elements %}
        {% if lineItem.type is same as 'product' %}
            {% if lineItem.cover.url %}
                {% set ratingProduct = {
                    id: lineItem.payload.productNumber,
                    name: lineItem.label,
                    price: lineItem.price.totalPrice,
                    imageUrl: lineItem.cover.url,
                } %}
            {% else %}
                {% set ratingProduct = {
                    id: lineItem.payload.productNumber,
                    name: lineItem.label,
                    price: lineItem.price.totalPrice,
                } %}
            {% endif %}
            {% set ratingProducts = ratingProducts|merge([ratingProduct]) %}
        {% endif %}
    {% endfor %}
    {% set ratingCaptainData = {
        email: page.order.orderCustomer.email,
        external_id: page.order.orderNumber,
        products: ratingProducts
    } %}
    <script>
        var RatingCaptain_data_script = [{{ ratingCaptainData | json_encode | raw }}];
    </script>
    <script src="https://ratingcaptain.com/api/js_v2/[Your website token]" async></script>
{% endblock %}

*Website token you can find here: Website page.
            
        
Was the article helpful?
mdi-check Yes mdi-close No
Thank you for rate this article.
364 out of 456 found this article helpful
Tabel of contents
Still need help?
If you have not found the information you are interested in, contact us directly. Our support will help to solve your doubts
Contact us
To start
Watch our video explaining the basic functions of Rating Captain.
Watch video