Join the Webstudio community

Updated 2 months ago

Fields in HTML Embeds

At a glance
The community member is having trouble embedding some code in an HTML Embed, as they are getting an "Unexpected token" error. They have used backticks and the $ sign, and are wondering if they have understood how to use them correctly. The comments suggest that the community member should separate the JavaScript into normal embed content and only interpolate the necessary parts from Webstudio, as putting the entire code into a template string is not a good idea. The comments also suggest minimizing the interpolation by using JavaScript variables instead.
Hi, when I try to put the code below in an HTML Embed, I get "Unexpected token" as an error. Have I understood how to use the backticks and $ sign correctly? Thanks in advance



<style>
.accordion-header {
background-color: #f4f4f4;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
.accordion-header:hover {
background-color: #ddd;
}
.accordion-content {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
.accordion-header:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
</style>
<div class="accordion-item">
<button class="accordion-header"></button>
<div class="accordion-content">
<p>${Collection Item["Review_1_Name"]}</p>
</div>
</div>
<script>
document.addEventListener('click', function(e) {
if (!e.target.matches('.accordion-header')) return;

e.target.classList.toggle('active');
var content = e.target.nextElementSibling;
if (content.style.display === 'block') {
content.style.display = 'none';
} else {
content.style.display = 'block';
}
});
</script>
Attachment
image.png
R
O
7 comments
Its not appearing in Discord for some reason but this part has the backticks and $ sign
Just realised there is a Radix accordion so will probably use that instead πŸ‘Œ But would still be good to know how to put collection item content into an HTML Embed
do you really need to put code into expression?
It seems to me that you want to separate your javascript into normal embed content and then add the bits that you want to interpolate in from webstudio
otherwise the entire code becomes a template string and that's not a good idea
you could minimize that interpolation by only having a final function call in a separate small script that you interpolate or setting up js variables first that have the interpolations, then using them
Add a reply
Sign up and join the conversation on Discord
","url":"https://help.webstudio.is/fields-in-html-embeds-xr4Z1Mg8z81k","identifier":"xr4Z1Mg8z81k","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":"Its not appearing in Discord for some reason but this part has the backticks and $ sign","dateCreated":"2024-10-01T10:27:07.230Z","dateModified":"2024-10-01T10:27:07.230Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/3b9309c9-0cac-45bd-9ba8-6832728a6040","name":"Richard","identifier":"3b9309c9-0cac-45bd-9ba8-6832728a6040","image":"https://cdn.discordapp.com/avatars/390467719885094924/e7fddc2d71f7455323786937600e50c0.webp?size=256"},"commentCount":0,"comment":[],"position":1,"upvoteCount":0},{"@type":"Comment","text":"","dateCreated":"2024-10-01T10:28:12.568Z","dateModified":"2024-10-01T10:28:12.568Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/3b9309c9-0cac-45bd-9ba8-6832728a6040","name":"Richard","identifier":"3b9309c9-0cac-45bd-9ba8-6832728a6040","image":"https://cdn.discordapp.com/avatars/390467719885094924/e7fddc2d71f7455323786937600e50c0.webp?size=256"},"commentCount":0,"comment":[],"position":2,"upvoteCount":0},{"@type":"Comment","text":"Just realised there is a Radix accordion so will probably use that instead πŸ‘Œ But would still be good to know how to put collection item content into an HTML Embed","dateCreated":"2024-10-01T10:33:08.830Z","dateModified":"2024-10-01T10:33:08.830Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/3b9309c9-0cac-45bd-9ba8-6832728a6040","name":"Richard","identifier":"3b9309c9-0cac-45bd-9ba8-6832728a6040","image":"https://cdn.discordapp.com/avatars/390467719885094924/e7fddc2d71f7455323786937600e50c0.webp?size=256"},"commentCount":0,"comment":[],"position":3,"upvoteCount":0},{"@type":"Comment","text":"do you really need to put code into expression?","dateCreated":"2024-10-01T10:52:49.736Z","dateModified":"2024-10-01T10:52:49.736Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":4,"upvoteCount":0},{"@type":"Comment","text":"It seems to me that you want to separate your javascript into normal embed content and then add the bits that you want to interpolate in from webstudio","dateCreated":"2024-10-01T10:54:06.499Z","dateModified":"2024-10-01T10:54:06.499Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":5,"upvoteCount":0},{"@type":"Comment","text":"otherwise the entire code becomes a template string and that's not a good idea","dateCreated":"2024-10-01T10:54:19.600Z","dateModified":"2024-10-01T10:54:19.600Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":6,"upvoteCount":0},{"@type":"Comment","text":"you could minimize that interpolation by only having a final function call in a separate small script that you interpolate or setting up js variables first that have the interpolations, then using them","dateCreated":"2024-10-01T10:55:41.319Z","dateModified":"2024-10-01T10:55:41.319Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":7,"upvoteCount":0}],"author":{"@type":"Person","url":"https://help.webstudio.is/members/3b9309c9-0cac-45bd-9ba8-6832728a6040","name":"Richard","identifier":"3b9309c9-0cac-45bd-9ba8-6832728a6040","image":"https://cdn.discordapp.com/avatars/390467719885094924/e7fddc2d71f7455323786937600e50c0.webp?size=256"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0}}]