How can I fix the issue with my code in Webflow's HTML embed component that causes it to display all tags instead of replicating a specific result from the CMS?
TL;DR
- Use Webflow’s "Add Field" button to insert CMS fields only outside of
<script>or<style>tags. - Pass dynamic data via
data-*attributes or hidden elements, then access it in Page Settings Footer with JavaScript.
If your HTML embed component in Webflow is displaying raw tags instead of rendering or outputting values from the CMS Collection, it's typically due to syntax or incorrect dynamic field usage.
1. Understand the CMS Binding Limitation in Embed
- Webflow’s Embed component allows you to insert custom HTML with dynamic fields from the CMS using the “Add Field” (+Add Field) feature.
- However, you cannot use CMS bindings inside
<script>or<style>tags—Webflow escapes them for security, which causes issues.
2. Use CMS Fields in Safe Places Only
- Make sure any dynamic CMS fields are placed outside of
<script>or<style>tags. - For example, this won’t work:
<script>var name = "{{name}}";</script>— Outputs the raw{{name}}string.- Instead, do:
<div data-name="{{name}}"></div>— Then read it with JavaScript elsewhere (e.g., via custom code in the Page Settings Footer block).
3. Escape HTML Properly (If Needed)
- If you are manually typing something like
{{name}}inside the embed without using the dynamic binding, Webflow won’t replace it. - Always use the “+Add Field” button to insert CMS bindings correctly.
4. Avoid Using Template Syntax
- Webflow does not recognize
{{fieldName}}or similar template syntax inside an embed. - Instead, use the Webflow-provided dynamic field dropdown inside the Embed component.
5. Modify Script Placement
- If you're trying to inject dynamic data into scripts, move the main script to Footer Code (in Page Settings).
- In your embed, insert CMS fields as **
data-*attributes** or hidden elements: <div id="cmsData" data-name="(Add Field → Name)"> </div>- Then, in Footer:
- Use
document.getElementById("cmsData").dataset.namein JavaScript.
Summary
To fix CMS values not rendering in an HTML embed: avoid putting CMS fields inside <script> tags, use the "Add Field" button, and pass values via attributes for scripts handled in the Footer. This ensures proper output and avoids raw tag display.