Integrate AI chatbots with Webstudio

Add HTML Embed Component:

• Navigate to Components > General in the Webstudio interface.
• Drag and drop the HTML Embed component onto your canvas.

Access Settings:

• Click on the HTML Embed instance to select it.
• Open the Settings panel.

Insert Custom Code:

• In the Code section, paste your custom HTML, CSS, or JavaScript code into the provided text area.
• If your code includes scripts, toggle the "Run Script on Canvas" option to enable execution.

Use Slots for Reusability:

• To reuse your custom code across multiple pages, create a Slot component.
• Place your HTML Embed instance inside the Slot. You can now copy and paste this Slot instance anywhere in your project.

Avoid Global Variables:

• Use <script type="module"> to prevent your variables from becoming global.
• Alternatively, use an Immediately Invoked Function Expression (IIFE) to encapsulate your code.

Best Practices:

• Name your HTML Embed clearly (e.g., [purpose] script).
• Do not include sensitive information in your code.
• Document your code for easier maintenance.
• For scripts, ensure to toggle "Client Only" if necessary.