Squarespace Integration

Integrate REVIEWS.io and Squarespace

Andrew Garcorz avatar
Written by Andrew Garcorz
Updated over a week ago

A step by step guide on how to connect your Squarespace store with your REVIEWS.io account.

Requirements

  • Available on all REVIEWS.io plans

  • In Squarespace you need to be on the Advanced Commerce Plan

Navigation

  • Log into your REVIEWS.io account

  • Navigate to Integrations

  • Navigate to Squarespace.

Integration Instructions

From the Squarespace integration page, select 'Authenticate with Squarespace',

All all permissions REVIEWS.io requires in your account by selecting 'Allow'.

You will then be notified that your Squarespace store is integrated successfully, as per below:

Installing Product Review Widget

Step 1. Open Settings

Open your website on Squarespace and in the menu, select Settings

Step 2. Advanced Settings

Now click to view the Advanced Settings

Step 3. Code Injection

Now click to view the Code Injection page.

Step 4. Add Footer Code

<script src="https://widget.reviews.co.uk/rating-snippet/dist.js"></script>
<script src="https://widget.reviews.co.uk/polaris/build.js"></script>

<link rel="stylesheet" href="https://widget.reviews.co.uk/rating-snippet/dist.css" />
<style>.ruk_rating_snippet .ruk-rating-snippet-count { font-family: inherit }</style>

<script>
var urlKey, skuTitle, ratingBlocks, beforeReviewsWidget, starColor;

renderReviewsRatingStars = function() {
ratingSnippet("ruk_rating_snippet", {
store: urlKey,
color: starColor,
linebreak: false,
usePolaris: true,
text: "Reviews",
customLookupSkuFallback: true,
useCustomLookup: true
});
};


renderReviewsCombinedWidget = function() {
var product_sku = alphaWithNoVowels(skuTitle.first().text());
if ($('#ReviewsCombinedWidget').length) {
new ReviewsWidget('#ReviewsCombinedWidget', {
store: urlKey,
widget: 'polaris',

options: {
types: 'product_review',
per_page: 5,

product_review: {
lookup: product_sku,
hide_if_no_results: false,

},

header: {
enable_summary: true,
enable_ratings: true,
enable_attributes: true,
enable_image_gallery: true,
enable_percent_recommended: false,
enable_write_review: true,
enable_ask_question: true,
overall_rating_style: 'outof5',
image_thumbnail_size: 'large',
enable_sub_header: true,
},

filtering: {
enable: true,
enable_text_search: true,
enable_overall_rating_filter: true,
enable_ratings_filters: true,
enable_attributes_filters: false,
enable_sorting: true,
},

reviews: {
enable_share: true,
enable_helpful_vote: true,
enable_helpful_display: true,
enable_report: true,
enable_date: true,
enable_ratings: true,
enable_images: true,
image_thumbnail_size: 'large',
enable_attributes: true,
enable_verified_badge: true,
enable_avatar: true,
enable_reviewer_name: true,
enable_product_name: true,
enable_reviewer_address: true,
reviewer_address_format: 'country',
enable_reviewer_recommends: true,
},

avatars: {
enable_gravatar: true,
gravatar_fallback: 'identicon'
},
},

styles: {
'--base-font-size': '16px',

'--common-button-font-family': 'inherit',
'--common-button-font-size': '16px',
'--common-button-font-weight': '500',
'--common-button-letter-spacing': '0',
'--common-button-text-transform': 'none',
'--common-button-vertical-padding': '10px',
'--common-button-horizontal-padding': '20px',
'--common-button-border-width': '2px',
'--common-button-border-radius': '0px',
'--primary-button-bg-color': '#0E1311',
'--primary-button-border-color': '#0E1311',
'--primary-button-text-color': '#ffffff',
'--secondary-button-bg-color': 'transparent',
'--secondary-button-border-color': '#0E1311',
'--secondary-button-text-color': '#0E1311',
'--common-star-color': starColor,
'--common-star-disabled-color': 'rgba(0,0,0,0.25)',
'--medium-star-size': '22px',
'--small-star-size': '19px',
'--heading-text-color': '#0E1311',
'--heading-text-font-weight': '600',
'--heading-text-font-family': 'inherit',
'--heading-text-line-height': '1.4',
'--heading-text-letter-spacing': '0',
'--heading-text-transform': 'none',
'--body-text-color': '#0E1311',
'--body-text-font-weight': '400',
'--body-text-font-family': 'inherit',
'--body-text-line-height': '1.4',
'--body-text-letter-spacing': '0',
'--body-text-transform': 'none',
'--inputfield-text-font-family': 'inherit',
'--input-text-font-size': '14px',
'--inputfield-text-font-weight': '400',
'--inputfield-text-color': '#0E1311',
'--inputfield-border-color': 'rgba(0,0,0,0.2)',
'--inputfield-background-color': 'transparent',
'--inputfield-border-width': '1px',
'--inputfield-border-radius': '0px',
'--common-border-color': 'rgba(0,0,0,0.15)',
'--common-border-width': '1px',
'--common-sidebar-width': '190px',
'--slider-indicator-bg-color': 'rgba(0,0,0,0.1)',
'--slider-indicator-button-color': '#0E1311',
'--slider-indicator-width': '190px',
'--badge-icon-color': '#0E1311',
'--badge-icon-font-size': 'inherit',
'--badge-text-color': '#0E1311',
'--badge-text-font-size': 'inherit',
'--badge-text-letter-spacing': 'inherit',
'--badge-text-transform': 'inherit',
'--author-font-size': 'inherit',
'--author-text-transform': 'none',
'--avatar-thumbnail-size': '60px',
'--avatar-thumbnail-border-radius': '100px',
'--avatar-thumbnail-text-color': '#0E1311',
'--avatar-thumbnail-bg-color': 'rgba(0,0,0,0.1)',
'--photo-video-thumbnail-size': '80px',
'--photo-video-thumbnail-border-radius': '0px',
'--mediaslider-scroll-button-icon-color': '#0E1311',
'--mediaslider-scroll-button-bg-color': 'rgba(255, 255, 255, 0.85)',
'--mediaslider-overlay-text-color': '#ffffff',
'--mediaslider-overlay-bg-color': 'rgba(0, 0, 0, 0.8))',
'--mediaslider-item-size': '110px',
'--pagination-tab-text-color': '#0E1311',
'--pagination-tab-text-transform': 'none',
'--pagination-tab-text-letter-spacing': '0',
'--pagination-tab-text-font-size': '16px',
'--pagination-tab-text-font-weight': '600',
'--pagination-tab-active-text-color': '#0E1311',
'--pagination-tab-active-text-font-weight': '600',
'--pagination-tab-active-border-color': '#0E1311',
'--pagination-tab-border-width': '3px',
},
});
}
}



alphaWithNoVowels = function(string) {
return string.replace(/[^b-df-hj-np-tv-z]/gi, '').substr(0, 20);
};

attachProductRatingBlocks = function() {

urlKey = 'my-company';
starColor = '#f47e27';
skuTitle = jQuery('.ProductItem-details-title');
ratingBlocks = jQuery('.ProductItem-details-title, .grid-title, .ProductList-title, .summary-title-link');
beforeReviewsWidget = jQuery('.ProductItem-additional');

if (skuTitle !== undefined) {
ratingBlocks.each(function() {
if (!jQuery(this).hasClass('mobile')) {

var product_id = alphaWithNoVowels(jQuery(this).text());

jQuery('<div ' + (jQuery(this).is("a") || jQuery(this).is("div") ? ' style="text-align: center" ' : '') + ' class="ruk_rating_snippet" data-sku="' + product_id + '"></div>').insertAfter(jQuery(this));
}

});
}

jQuery('#ReviewsCombinedWidget').remove();

if (beforeReviewsWidget.length) {
beforeReviewsWidget.append('<div id="ReviewsCombinedWidget"></div>');
}

setTimeout(function() {
renderReviewsRatingStars();
renderReviewsCombinedWidget();
}, 400);

}




if (typeof window.jQuery === "undefined") {
var head = document.getElementsByTagName("head")[0];
var script = document.createElement('script');

script.onload = function() {
attachProductRatingBlocks();
}

script.type = 'text/javascript';
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js';

head.appendChild(script);
} else if (typeof window.jQuery === "function") {
attachProductRatingBlocks();
}
</script>

Your product reviews will now appear directly for your products as a rating snippet, and Polaris widget on your product pages.

Did this answer your question?