Writing Event Handlers with the AI Code Assistant

The Properties & Events panel in the Code Editor toolbar includes an AI Code Assistant that helps you generate event handler code for frontend elements on your site. You can describe what you want your code to do when an element's event is triggered to the AI Code Assistant. It returns the code that matches your description together with an explanation of the code.

Before you begin

You must enable coding on your site to access the code assistant.

Note the following about the AI Code Assistant's current functionality:

• The assistant only supports inputs written in English.

• The assistant only supports simple use cases that can be implemented in frontend page code files. It doesn't currently support use cases that require both frontend and backend code.

• The assistant doesn’t support requests that require interactions with third-party services, external APIs, or the use of packages.

Using the AI Code Assistant

To write an event handler with the AI Code Assistant:

1. In the editor, select an element on a page.

2. In the Properties & Events panel, select AI Assistant.

   

   The AI Code Assistant modal opens.

3. Select the event handler to add to the element.

4. Describe what you want your code to do when the event is triggered, then click Generate Code.

   The AI Code Assistant generates and displays the code.

5. To add the code to your site, click Insert Code.

   

   The code appears in the code editor at the bottom of the current page code.

   Note: Make sure to test the code in preview mode before publishing your site.