Quick Start WordPress Configuration
Get Started Free

AI Search for Your Website

Let visitors ask questions in natural language and get instant, accurate answers about your business.

Free Plan Available No Coding Required WordPress Plugin Works on Any Site

Quick Start

Add an AI-powered search assistant to your website in under 2 minutes. Your visitors can ask questions like "What are your hours?" or "Do you offer delivery?" and get instant answers.

💡

First, create your Viva account at goviva.ai/business-signup to get your Business ID and set up your knowledge base.

Copy & Paste Installation

Add this code to your website, just before the closing </body> tag:

<script
    src="https://ask.goviva.ai/embed.js"
    data-business="YOUR_BUSINESS_ID"
    async>
</script>

Replace YOUR_BUSINESS_ID with your actual Business ID from the Viva dashboard (Settings → Integrations).

✔

That's it! A search icon will appear on your site. Click it to open the AI search interface.

How It Works

1. Train Your AI

Add your business info, FAQs, services, and policies in the Viva dashboard.

2. Embed the Widget

Copy one line of code to your website or install the WordPress plugin.

3. Answer Questions

Visitors ask questions in natural language and get accurate, instant answers.

4. Capture Leads

Optionally collect contact info and route inquiries to your inbox.

What Can Visitors Ask?

WordPress Plugin

The easiest way to add the Ask Bar to WordPress sites.

Installation

  1. Download the plugin from the WordPress Plugin Directory or upload the ZIP file
  2. Go to Plugins → Add New → Upload Plugin
  3. Activate the plugin
  4. Go to Settings → Viva Ask Bar
  5. Enter your Business ID and save

Using Shortcodes

Place the search bar anywhere using shortcodes:

[viva_askbar]

With options:

[viva_askbar display="search-bar" size="lg" placeholder="Ask us anything..."]

Elementor Integration

For Elementor users, use the HTML widget:

  1. Drag an HTML widget to your desired location
  2. Paste the embed code (see Quick Start above)
  3. Save and preview

Site-Wide Installation

To show the floating icon on all pages:

  1. Go to Appearance → Theme Editor → footer.php
  2. Or use a plugin like "Insert Headers and Footers"
  3. Add the embed code before </body>

Manual Installation

For non-WordPress sites, add the script tag directly to your HTML.

In Your HTML

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your content -->

    <!-- Viva Ask Bar - place before </body> -->
    <script
        src="https://ask.goviva.ai/embed.js"
        data-business="YOUR_BUSINESS_ID"
        async>
    </script>
</body>
</html>

In a Tag Manager

For Google Tag Manager or similar:

  1. Create a new Custom HTML tag
  2. Paste the embed code
  3. Set trigger to "All Pages"
  4. Publish

Display Modes

The Ask Bar supports 4 display modes to fit your design.

→ View Live Demo of All Display Options

1. Floating Icon (Default)

A compact icon in the corner of the page. Click to open the full search modal.

<script
    src="https://ask.goviva.ai/embed.js"
    data-business="YOUR_BUSINESS_ID"
    async>
</script>

2. Icon Only (No Label)

Just the search icon, more compact.

<script
    src="https://ask.goviva.ai/embed.js"
    data-business="YOUR_BUSINESS_ID"
    data-display="icon-only"
    async>
</script>

3. Inline Search Bar

Embeds directly into your page. Great for hero sections.

<script
    src="https://ask.goviva.ai/embed.js"
    data-business="YOUR_BUSINESS_ID"
    data-display="search-bar"
    data-size="lg"
    data-placeholder="Ask us anything..."
    async>
</script>

4. Custom Button

A styled button that opens the search modal.

<script
    src="https://ask.goviva.ai/embed.js"
    data-business="YOUR_BUSINESS_ID"
    data-display="button"
    data-label="Ask a Question"
    async>
</script>

Configuration Options

Customize the Ask Bar with these data attributes:

Attribute Values Description
data-business Your ID Required. Your Viva Business ID
data-display icon, icon-only, button, search-bar Widget display mode
data-size sm, md, lg Size of the widget
data-position bottom-right, bottom-left Position for floating modes
data-placeholder Any text Placeholder text in search bar
data-label Any text Button label (button mode)
data-color Hex color Accent color (e.g., "#4F46E5")
data-mobile true, false Show/hide on mobile devices

Styling & Colors

Custom Accent Color

Match your brand colors:

<script
    src="https://ask.goviva.ai/embed.js"
    data-business="YOUR_BUSINESS_ID"
    data-color="#0066CC"
    async>
</script>

CSS Overrides

For advanced customization, override CSS variables:

:root {
    --viva-accent-color: #0066CC;
}

/* Adjust floating button position */
#viva-floating-button {
    bottom: 100px !important;
}

JavaScript API

Control the Ask Bar programmatically:

// Open the search modal
window.VivaAskBar.open();

// Close the search modal
window.VivaAskBar.close();

// Check if loaded
if (window.VivaAskBar) {
    console.log('Ask Bar is ready');
}

Custom Trigger Button

Use your own button to open the search:

<button onclick="window.VivaAskBar.open()">
    Search Our Site
</button>

<script
    src="https://ask.goviva.ai/embed.js"
    data-business="YOUR_BUSINESS_ID"
    data-display="none"
    async>
</script>

Troubleshooting

Widget Not Appearing

  1. Check console for errors: Open browser DevTools (F12) → Console tab
  2. Verify Business ID: Make sure you're using the correct ID from your Viva dashboard
  3. Check for conflicts: Other scripts or ad blockers may interfere
  4. Clear cache: Try a hard refresh (Ctrl+Shift+R)

Answers Are Incorrect

  1. Update your knowledge base in the Viva dashboard
  2. Add more specific Q&A pairs for common questions
  3. Check that your business info (hours, services) is up to date

Styling Conflicts

⚠

Ad Blockers: Some ad blockers may block third-party widgets. If the Ask Bar doesn't appear for some users, this may be the cause.

Support

Need help? We're here for you.

Try It Live

Click the search icon in the bottom-right corner to see the Ask Bar in action.