Frequently asked questions

If a custom script breaks your Webstudio canvas and makes it unresponsive, you can:

1. Navigate to a different page in your project and restore from a backup,
2. Access the project through the dashboard with a special button that opens the builder with a ?safeMode flag to disable all scripts,
3. Always test scripts on a single page first and keep regular backups. A safe mode feature for disabling canvas scripts is being considered for implementation.

You can add custom JavaScript by using the HTML Embed component. Simply add an HTML Embed element to your page and include your JavaScript code within <script> tags. This allows you to implement custom functionality like form handling, animations, or API interactions that aren't built into Webstudio's visual editor.

If your schema markup is appearing twice when published, this is usually caused by broken HTML in your HTML Embed component. Make sure your HTML syntax is correct and properly closed. You can validate your HTML structure before adding it to the embed. If issues persist, share your build link for debugging assistance.

When using HTML Embed components for scripts like structured data (JSON-LD), check the 'Client Only' option to prevent server-side rendering issues. This stops Webstudio from parsing and re-rendering the script content, which can cause duplication problems when the same script gets processed multiple times.

To prevent schema duplication when embedding structured data (schema.org JSON-LD), make sure to check the 'Client Only' option in your HTML Embed component. This prevents Webstudio from parsing and re-rendering the script during server-side rendering, which can cause duplicate structured data to appear in validation tools like validator.schema.org.

To set up Google Tag Manager:

1. Add the head script tag in Project Settings > Custom Code,
2. Add the body noscript tag in an HTML Embed component placed appropriately on your page.

If GTM isn't working, common issues include: firewall software (like Portmaster) blocking Tag Manager IP addresses, incorrect placement of the body tag, or DNS/network issues. Check your firewall settings and ensure both head and body code are properly implemented.

To set up Google Tag Manager: 1) Add the head script tag in Project Settings > Custom Code, 2) Add the body noscript tag in an HTML Embed component placed on your page. Make sure the HTML Embed with the noscript tag is positioned appropriately in your page structure. If GTM isn't working, check that your firewall (like Portmaster) isn't blocking the Tag Manager IP addresses.

A safe mode feature is planned (GitHub issue 5373) that would allow disabling canvas scripts if they break the builder. The proposal includes a ?safe flag in the builder URL that would disable 'Run on Canvas' for all HTML embeds, allowing access to fix problematic scripts. This addresses cases where mutation observers or other scripts can completely freeze the builder interface.

If a script completely breaks the builder (making it unresponsive), you should: 1) Navigate to a different page in your project, 2) Restore from a previous backup if available, 3) Be careful with mutation observers on the document level as they can freeze everything. A safe mode feature is being developed to prevent this issue in the future.

For adding custom code like Google Tags via CMS, you have two approaches: 1) Fetch the complete code via API and place it in an HTML Embed element, or 2) Store only the tracking ID in your CMS and use that as part of a script template in Webstudio. The second approach is often cleaner as it separates data from code and makes tracking IDs easier to manage across different environments.

For Google Analytics, add the head script in Project Settings > Custom Code and the body script in an HTML Embed component. For cookie consent, consider using GDPR-compliant analytics alternatives that don't require cookie banners instead of traditional cookie consent solutions, as they provide a better user experience and avoid the need for complex cookie management.

If paragraph text becomes invisible (opacity: 0) when trying to edit or select portions of text, this is usually caused by conflicting custom scripts in your project. Check if you have any custom HTML Embed components with scripts that might be interfering with Webstudio's text editor. Remove or modify conflicting scripts to resolve this issue.

This was a bug where the 'name' property on iframe elements was incorrectly treated like the 'target' property. The workaround was to switch the tag to 'div', add the property, then change back to 'iframe'. This issue has been fixed in GitHub PR 5349 and should no longer occur in current versions of Webstudio.

If WordPress CMS content works in the editor but not on the live site, try enabling 'client only' for all scripts in your project settings. This forces scripts to run on the client side rather than server-side, which can resolve content loading issues. Also check for any 404 errors in the browser console that might indicate routing or API access problems.