Custom JS Widget lets you create a flexible, interactive experience for your website with Tolstoy's AI builder. Start from the Custom template, describe what you want, review the generated result in the live preview, and publish when it is ready.
How to create a Custom JS Widget
1. In Tolstoy, open Widgets from the left sidebar.
2. Select All templates, then choose the Custom category.
3. Open the Custom JS Widget template.
4. Review the template preview, then click Create my own.
5. In the widget chat, describe what you want to build. Include the widget's purpose, content, actions, destination links, and any design or responsive requirements.
6. Send your request and wait for the builder to update the project.
7. Review the generated widget in the Browser preview.
Customize and test your widget
Use follow-up prompts to change the copy, colors, layout, behavior, or links. You can also use the Browser, Media, Analytics, and Code tabs while you work.
Use the preview-page selector to test the Home page or Product page context. Switch to the mobile preview to check smaller screens, and refresh the preview after changes if needed.
Before publishing, test every button and link, confirm the widget remains readable at different screen sizes, and make sure the final content matches your website.
How to publish a Custom JS Widget
1. Review the latest build in the Browser preview.
2. Click Publish in the upper-right corner of the widget workspace.
3. Follow the on-screen publishing steps for the current project.
4. Verify the published result before adding it to a live page.
A Custom JS Widget project builds a self-contained JavaScript experience that can be mounted on a page. Use the installation details provided by the publish flow for your project, and coordinate any live-site placement with the person who manages your website.
Best practices
Keep the first request focused, then refine the widget with short follow-up prompts. Provide exact copy and destination URLs instead of placeholders, preview both desktop and mobile layouts, and test the widget in the page context where it will appear.
Frequently asked questions
Why does the preview show a starter widget?
The project opens with a starter screen until you describe what to build. Send a clear request in the chat and wait for the preview to update.
Can I change the widget after it is generated?
Yes. Send a follow-up prompt describing the change. Review the refreshed Browser preview before publishing again.
How do I test a product-page experience?
Open the preview-page selector and choose Product page. Select a product when prompted, then test the widget in that context.
What should I check before publishing?
Confirm the copy, links, interactions, responsive layout, and page context. Do not add the widget to a live site until the published result has been reviewed and approved.
