Install the widget in HTML, React, or Next.js

If your website is built with HTML, React, or Next.js, installing Zeltino means adding one project-specific script to the shared document head. Placing it in the shared layout allows the same widget to load across the public pages where visitors may need it.

You only need one installation for the site. This guide explains where that shared location normally lives in each setup and how to confirm the published domain is ready.

In this article, you'll learn:

• How to copy the correct project script
• Where to install it on an HTML site
• Where to install it in React
• Where to install it in Next.js
• How to verify and enable the published widget

Copy the project script#

Start in Zeltino so the code belongs to the correct project and domain:

1. Open Settings > Chat widget > Installation.
2. Add or select the exact website domain.
3. Choose HTML / JavaScript, React, or Next.js.
4. Select Copy script.

Always use the code shown for the selected project. A script copied from another project or environment can point the website at the wrong configuration.

HTML or JavaScript site#

Open the shared HTML template or layout used by the public site. Find the closing </head> tag and paste the copied script immediately before it, then publish the updated files.

If every page has separate HTML, add the script to each page where the widget should load. A shared layout is easier to maintain because future changes only need to be made once.

React site#

For a standard React application, the shared document template is commonly public/index.html. Add the script there before </head>. If your framework uses a different root HTML template, use its site-wide head section instead, then build and deploy the application.

Do not place a new copy of the script inside every rendered component. The document template should load it once for the application.

Next.js site#

Next.js provides different shared layouts depending on which router the project uses:

• with the App Router, use the shared app/layout.tsx and the framework's script support or a standard script in the document head;
• with the Pages Router, use the shared document configuration such as pages/_document.tsx.

Choose the shared file used by the application rather than an individual route. Ensure the script loads across the public pages you intend to support, then deploy the application.

Verify and enable#

After deployment, switch from the codebase to the public website. Verification checks the version visitors can reach, not a local development address.

1. Open the published website rather than a local development address.
2. Return to Installation and select Refresh check if needed.
3. Confirm the domain becomes Active.
4. Turn on Enable chat widget on this website.
5. Test the launcher and a complete conversation in a private browser window.

If the launcher appears, open it and send a message rather than stopping at the visual check. If the domain remains Verifying, see Troubleshoot widget installation and verification.