Quick Start
Add a side-panel AI chat to any website with a single script tag. Relay renders a vertical tab on the edge of the page that slides open to reveal a full chat experience powered by your Viva AI persona.
First, create your Viva account at goviva.ai/business-signup to get your Business ID. Then configure your AI persona and Relay settings in the dashboard (Settings → Relay).
Copy & Paste Installation
Add this snippet before the closing </body> tag:
<script src="https://goviva.ai/microsite-widget/loader.js"
data-business-id="YOUR_BUSINESS_ID"
data-channel="your-channel-name"
async></script>Replace YOUR_BUSINESS_ID with your Business ID from the Viva dashboard (Settings → Integrations), and your-channel-name with a channel you've created in the Channels page.
That's it! A vertical tab will appear on the right edge of the page. Click it to slide open the AI chat panel.
How It Works
- Script Load — The loader script is added to the host page via a single
<script>tag withdata-*attributes for configuration. - Config Fetch — The loader calls the Relay config API to retrieve the title, color, position, suggestion pills, and intent settings for your business.
- CSS & JS Injection — The loader injects the Relay stylesheet and main JavaScript file into the host page. Styles are scoped to avoid conflicts.
- Side-Tab Render — A vertical "notch" tab is rendered on the page edge. Clicking it slides open a chat panel where visitors interact with your AI persona via streaming responses.
Data Attributes
Configure Relay using data-* attributes on the script tag:
| Attribute | Required | Description |
|---|---|---|
data-business-id |
Yes | Your Viva Business ID. Determines which AI persona powers the chat. |
data-channel |
No | Channel slug for tracking which site the widget is embedded on. Create channels in the Viva dashboard under Channels. |
data-intent |
No | Sets the AI's conversational intent. Use a preset (show-products, donate, register) or custom text. |
Example with All Attributes
<script src="https://goviva.ai/microsite-widget/loader.js"
data-business-id="4685"
data-channel="partner-site"
data-intent="show-products"
async></script>Intent Presets
The data-intent attribute controls how the AI persona behaves in the chat. You can use built-in presets or provide custom text.
| Intent | Behavior |
|---|---|
show-products |
AI proactively showcases products and guides visitors toward purchases. |
donate |
AI focuses on donation goals, sharing impact stories and guiding to donate. |
register |
AI encourages visitors to sign up for events, programs, or memberships. |
| Custom text | Any free-form text becomes the AI's conversational goal. Example: data-intent="Help visitors find the right course" |
You can also configure a default intent in the Viva dashboard (Settings → Relay). The data-intent attribute on the script tag overrides the dashboard default.
Channels
Channels let you track where Relay is embedded and view per-site analytics. Each channel has its own embed code with a unique data-channel slug.
Creating a Channel
- Go to business.goviva.ai/channels
- Click Add Channel
- Enter a slug (e.g.,
partner-site), display label, and website URL - Copy the generated embed code
Channel Analytics
Click any channel in the dashboard to see conversations, orders, and revenue attributed to that embed location.
Dashboard Settings
Most Relay configuration is managed in the Viva dashboard rather than in code. Go to Settings → Relay to configure:
| Setting | Description |
|---|---|
| Enable Relay | Master toggle to activate or deactivate the widget across all channels. |
| Tab Label | Text displayed on the vertical side tab (e.g., "Chat with us"). |
| Theme Color | Hex color for the side tab and chat panel header. |
| Position | Which side of the page the tab appears on: Right or Left. |
| Suggestion Pills | Comma-separated quick-action prompts shown to visitors when the panel opens. |
Changes to dashboard settings take effect immediately — no need to update the embed code on your site.
Colors & Position
The theme color set in the dashboard controls the side tab background, chat panel header, and accent colors throughout the UI. Use any hex color value.
Position determines which edge of the viewport the tab attaches to:
| Value | Description |
|---|---|
right |
Default. Tab appears on the right edge of the page. |
left |
Tab appears on the left edge of the page. |
Suggestion Pills
Suggestion pills are quick-action buttons displayed when the chat panel opens. They help visitors start a conversation without typing. Configure them as a comma-separated list in the dashboard.
Example pills: View services, Book appointment, Contact us
Live Embed Example
Here is an example of a Relay embed for a partner website:
<script src="https://goviva.ai/microsite-widget/loader.js"
data-business-id="4685"
data-channel="imh-website"
data-intent="show-products"
async></script>This embeds Viva's AI persona on the IMH website with the show-products intent. The AI proactively showcases products to visitors and tracks analytics under the imh-website channel.
Troubleshooting
Tab Not Appearing
- Check Relay is enabled: Go to Settings → Relay in your Viva dashboard and verify the toggle is on.
- Verify Business ID: Ensure the
data-business-idmatches your dashboard (Settings → Integrations). - Check console for errors: Open DevTools (F12) → Console and look for
[MicrositeWidget]messages. - Check for script conflicts: Ad blockers or CSP policies may block the loader script.
Chat Not Responding
- Verify your AI persona is configured in the dashboard.
- Check that your knowledge base has content for the questions being asked.
- Look for network errors in DevTools → Network tab (requests to
api.goviva.ai).
Styling Conflicts
Relay injects its own scoped CSS. If you experience z-index issues, the panel uses a high z-index value. Ensure no other elements on your page use a competing stacking context.
Ad Blockers: Some ad blockers may block third-party widget scripts. If the tab doesn't appear for some users, this may be the cause.
Support
- Email: [email protected]
- Dashboard: business.goviva.ai