Summary
You can install Astra on any website in just a few steps by copying a code snippet from your Astra Dashboard and pasting it into your site’s HTML. Once installed, you can choose how Astra appears—either as a chat widget, a spotlight view, or with the optional magic highlighter feature.
Instructions
Follow these steps to install Astra on your website:
Step 1: Get your installation code
Log in to your Astra Dashboard at https://astra.wati.io.
Click Install agent button.
Select Copy Code to copy your installation code.
Step 2: Add the code to your website
Locate the correct file for your website type and paste the code before the closing </body> tag.
General HTML websites: Add the code in your main HTML file (usually
index.htmlinside thepublic_htmlfolder).React.js: Open the
public/index.htmlfile and paste the code just before the closing</body>tag.Next.js: Create a
_document.jsfile inside thepagesfolder, then include the script before the closing</body>tag.Other websites: Find the file where HTML is managed and paste the code before the closing
</body>tag.
Here’s what it looks like:
<!-- Your existing HTML code here -->
<!-- Paste the Astra code here -->
</body>
Step 3: Save and verify
Save your changes and deploy them (if required).
Refresh your website—you should now see the Astra widget appear.
Deployment options
Once installed, Astra can appear on your website in different ways. You can also enable the magic highlighter feature for an interactive experience.
1. Widget (bottom-right chat bubble)
Appears as a chat bubble in the bottom-right corner of your webpage.
Uses your branded icon for a customized look.
Shows suggested conversation starters such as common questions.
Visitors can click a question, and the AI agent responds directly.
2. Spotlight (bottom-center chat view)
Appears as a spotlight-style chat window in the bottom-center of your screen.
Visitors can select a question, and the AI agent will provide an answer.
3. Magic highlighter
Lets visitors ask questions by highlighting any text on your site.
For example, if someone highlights “search engine optimization” and clicks Ask Astra (or Ask Agent), the AI agent will generate and answer the question.
The feature scans your entire website knowledge base to provide the most relevant response.
Choosing the right option
Pick between the widget or the spotlight depending on your site’s design and visitor experience preferences.
Both can be deployed using the installation code you copied earlier.
The magic highlighter can be enabled with either option for more interactive browsing.