Add Kenect Testimonials

This article will cover how to identify a Kenect testimonial script, as well as how to implement it. This is a slightly different process than adding most third party scripts because it must be placed within content. The concepts of this process can be used to place any third party script that requires placement on a specific page, but may need to be altered slightly to suit whatever the script is.

1 Identifying the Script
2 Altering for Page Placement
3 Placing on Single Page Only
4 Placing in Footer

Identifying the Script

A script for Kenect Testimonials is going to have a specific look to it. It should mainly contain 2 things – the link to the .js file that styles and populates the reviews, and the ID of the specific client.

Example:

<script async src='https://review-carousel-resource.kenect.com/reviews_widget.min.js' data-publicId='#######################' type='text/javascript'></script>

The ID should contain a mixture of numbers and letters, and possibly an underscore (_) or two. If the script does not follow the above format, then it may not work correctly.

Altering for Page Placement

Now that we have our script, we need to alter it to make it work with our system. We can not place a script within the content of a page or snippet for security reasons (and our ability to turn off scripts, etc with Cookie Consent Management), so we need to adjust this to make sure it will still show up in the page as intended, without actually placing the script there.

In order to do this, we will need to use the following template:

<script>
  // Function to load the script dynamically
  function loadReviewsWidget() {
    const script = document.createElement('script');
    script.src = 'https://review-carousel-resource.kenect.com/reviews_widget.min.js';
    script.async = true;
    script.type = 'text/javascript';
    script.setAttribute('data-publicId', 'ID_GOES_HERE');
    document.getElementById('reviews-widget').appendChild(script);
  }

    document.addEventListener('DOMContentLoaded', function () {
    const reviewsDiv = document.getElementById('DIV_CLASS_GOES_HERE');
    if (reviewsDiv) {
      loadReviewsWidget();
    }
  });
</script>

Two items in this template need to be replaced before adding (which we will do in the following placement step) – the ID_GOES_HERE and the DIV_CLASS_GOES_HERE.

For ID_GOES_HERE, you will replace that text with the unique ID from the script you were given (the data-publicId value). This will tell this new script to reference the unique customer’s ID when running the script. (If you are using this to implement something other than Kenect testimonials, you will also need to replace the script.src value in this new script with whatever .js file is relevant in the other third party’s script.)

For DIV_CLASS_GOES_HERE, you’ll want to replace this text with a value that you will use as the name of the “container” where this will show up on the page/snippet it is intended to be placed on. Something like “reviews-widget” will do nicely.

Now that you have your altered script and div ID ready to go, you can place this on the site!

Placing on Single Page Only

More often than not, the dealer will ask for this to be placed in one location only – the home page or the Testimonials page, most often. To place this on a single page, we will need to add two items to the page.

Firstly, we’ll want to place the altered script we made in the Scripts area for the page. This is located in the “Developer” tab of the page in question. You’ll want to place it in the “Page Footer Scripts” area in the Developer Tab.

Now that the script is in place, let’s make sure that it knows where to point to.

In the Content tab of the page in question, we’ll need to add a div class container. It is usually helpful to look at the homepage on the front end to determine where it makes sense to place the container. This will generally be a full-width container, so you’ll want to ensure that it’s in a place that makes sense for it to sit full-width.

Once you’ve decided where it should go, you’ll need to add a container with the correct div class inside.

For example:

It doesn’t matter too much what the outer div class is – in the example, an outer container was used that was already further up the page (“feature-cards-wrapper”). You can also just use “div class=”container” as an outer wrapper. This basically just ensures that the script doesn’t go all the way to the edge of the page, as it will look strange if it does.

Once you’ve placed this in the content of the page, you can Save & Publish the page. Double check the homepage to ensure that the placement looks correct and the script is working as intended. Then you’re all set!

Placing in Footer

To place in the footer, instead of adding the altered script to the Footer Scripts for the page, it’ll get added to the Footer Scripts for the whole site in the domain node. This is under the Developer Tab.

Additionally, the div class will be added to the top of the Footer snippet instead of in a single page. This can be found in the Snippets folder.

Make sure once you save that you double check the script is correctly showing on multiple pages!