Join the Webstudio community

Updated 4 months ago

Embedding Widget Script

At a glance

A community member is trying to embed a 3rd party widget from a review site on their website, but is having trouble getting it to work on their WebStudio platform. They provide the code they are using, which includes a <reviews-root></reviews-root> element and some JavaScript to initialize the widget, as well as a <div id="review-wall"></div> element and more JavaScript to configure the widget's appearance.

Another community member suggests that the code in the project settings doesn't render in the builder, and recommends moving the script to the HTML embed on the page instead. The original poster confirms that this resolved the issue and got the widget working.

Useful resources
I trying to embed a 3rd party widget are on site code from review site, i get it working on WP but cant get it working on webstudio

first part is
<reviews-root></reviews-root>
<script>
window.reviews=window.reviews

function(){(reviews.q=reviews.q

[]).push(arguments)};
window.reviews('init', 'insertcodehere');
</script>
<script src="https://tag.collectcustomerfeedback.com/js/app.js" async></script>
which says it should be added to body

2nd part is

<div id="review-wall"></div>
<script>
window.reviews('wall', {
id: 'review-wall',
score: 4,
date: true,
limit: 100,
border_color: '#ccc',
border_width: '1px',
border_radius: '5px',
drop_shadow: false,
padding: '20px',
quotes: false,
review_chars: 1, // Reviews must be at least this many characters.
font_family: 'Montserrat', // Any font from fonts.google.com.
customer_position: 'bottom', // Can be top or bottom.
name_convention: 'first_name_last_initial', // Can be full_name, initials, or hidden.
sources: [], // An array of slugs.
locations: [], // An array of slugs.
tags: [], // An array of slugs.
});
</script>

which should go where widget should appear but i dont get anything

ive put 1st part of code in projectsettings> custom code

and second in the html embed on the page i want to show

and help greatful thanks
J
u
2 comments
many things can be happening. first, project settings code doesnt render in the builder. It's meant for tracking scripts as you wouldnt want those to fire when youre building.

Move the script to html embed then report back. Likely there are other issues though
Thanks John moved all the code to html embed, got it working πŸ‘
Add a reply
Sign up and join the conversation on Discord
which says it should be added to body2nd part is
which should go where widget should appear but i dont get anythingive put 1st part of code in projectsettings> custom codeand second in the html embed on the page i want to showand help greatful thanks","url":"https://help.webstudio.is/embedding-widget-script-zN5Rs4F8V1xb","identifier":"zN5Rs4F8V1xb","publisher":{"@type":"Organization","name":"Webstudio","logo":{"@type":"ImageObject","url":"https://assets.usehall.com/org_01JEYTC8WWMF7N46W9J4J7CFDP/c7f10f06-f934-4e35-b008-431a89254f9f.png"}},"comment":[{"@type":"Comment","text":"many things can be happening. first, project settings code doesnt render in the builder. It's meant for tracking scripts as you wouldnt want those to fire when youre building. Move the script to html embed then report back. Likely there are other issues though","dateCreated":"2024-10-11T17:38:52.710Z","dateModified":"2024-10-11T17:38:52.710Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a3a85f00-1132-4262-8176-1ff92ab9d883","name":"John Siciliano","identifier":"a3a85f00-1132-4262-8176-1ff92ab9d883","image":"https://cdn.discordapp.com/avatars/1141467296532009071/8c83067a661d2916bfb8be5a37677463.webp?size=256"},"commentCount":0,"comment":[],"position":1,"upvoteCount":0},{"@type":"Comment","text":"Thanks John moved all the code to html embed, got it working πŸ‘","dateCreated":"2024-10-11T18:52:17.626Z","dateModified":"2024-10-11T18:52:17.626Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/3f144878-7f57-4a34-9318-4ab4d2c93c56","name":"ukray","identifier":"3f144878-7f57-4a34-9318-4ab4d2c93c56","image":"https://cdn.discordapp.com/embed/avatars/0.png"},"commentCount":0,"comment":[],"position":2,"upvoteCount":0}],"author":{"@type":"Person","url":"https://help.webstudio.is/members/3f144878-7f57-4a34-9318-4ab4d2c93c56","name":"ukray","identifier":"3f144878-7f57-4a34-9318-4ab4d2c93c56","image":"https://cdn.discordapp.com/embed/avatars/0.png"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0}}]