Coding Agent Script Installation

Check out a quick video walk through here:

‍

‍
‍

‍Step 1: Install the Dynamic Script in your project settings, at the top of the body tag

A JavaScript code snippet for a footer, used to add a dynamic script to the footer of a website, specifically loading the Miyagi AI Dynamic Script.

Step 2: Install the Stylesheet

Stylesheets compile all CSS in files that you set to be global. CSS files that you set to be only triggered on a certain page will be rendered via the dynamic script. (This can cause a bit of a delay/flicker since the javascript has to render before it can load the css, so we’d recommend setting any important css files to global).

Option 1: In a Global Component at the top of every page

This will allow the css to render inside the designer and in preview mode. This also allows you to easily toggle between Staging & Production sheets without having to publish in Webflow.

‍

A "Navigator" panel from a web development tool, showing a list of elements including a highlighted "Stylesheet - Miyagi" and "global-styles". The panel has a dark background with icons for closing and pinning.

A "Navigator" panel from a software interface, displaying a list of items including "Miyagi-styles" (highlighted) and two "Code Embed" items. Icons for closing and pinning the panel are visible at the top right.

A user interface element with "Staging" and "Production" sections, each having a "Visible" toggle switch, a "Hidden" toggle, a plus sign, and a "None" field below.

‍

Option 2: In the Head of your project settings

A code snippet for adding a stylesheet to the head of an HTML document, with the title "Head code" and instructions to add the code at the end of the <head> tag. A blue "Save" button is visible.

Important Info:

Stylesheets compile all CSS in files that you set to be global. CSS files that you set to be only triggered on a certain page will be rendered via the dynamic script. (This can cause a bit of a delay/flicker since the javascript has to render before it can load the css, so we’d recommend setting any important css files to global).
Do not add both Production and Staging Stylesheets at the same time as that can cause issues. Switch out the stylesheets as needed, or for a better experience, create a global component that has both stylesheets inside it with visibility prop attached to each one so you can easily toggle which stylesheet you want to use.

‍

Step 3: Control what pages scripts & styles are loaded on

Go to your file settings, and then select the pages you want the script to load on. All CSS files that are set to be global will render via the stylesheet, and those that are set to a specific page will render via the dynamic script - which can cause a bit of flicker if your css is at the top of a page. We recommend settting all important CSS files to global.

A context menu for "custom-scrollbar.css" in a dark-themed code editor, showing options to "Rename," "Settings," and "Delete." The "Delete" option is highlighted in red.

A settings panel for a CSS file named "custom-scrollbar.css", showing options to enable a global script and select specific pages for the CSS to apply to, with the Home page currently selected.

‍