Viva Ask Bar - Display Options

Display Modes

Choose how the Ask Bar appears on your site - as a floating button or inline search bar.

Icon with Label (Default)

Floating button with search icon and "Ask" label. Great for most websites.

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

Icon Only

Compact circular button with just the search icon. Minimal footprint.

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

Custom Button Label

Floating button with your custom label text. Use for branding.

<script src="https://ask.goviva.ai/embed.js"
        data-business="YOUR_SLUG"
        data-display="button"
        data-label="Ask AI"></script>

Ask us anything...

Inline Search Bar

Visible search bar that embeds directly in your page content.

<script src="https://ask.goviva.ai/embed.js"
        data-business="YOUR_SLUG"
        data-display="search-bar"></script>

Size Variants

Control the size of your Ask Bar with small, medium (default), or large options.

Small

Compact size for minimal visual impact.

data-size="sm"

Medium (Default)

Balanced size that works for most websites.

data-size="md" (or omit)

Large

Eye-catching size for high visibility.

data-size="lg"

Search Bar Sizes

Ask us anything...

Small Search Bar

Compact search bar for tight spaces.

Ask us anything...

Large Search Bar

Prominent search bar for hero sections.

Style Variants

Match your brand with minimal, default, or prominent styling.

Minimal

Subtle styling that blends with your page design.

data-style="minimal"

Default

Balanced styling with brand color background.

data-style="default" (or omit)

Prominent

Bold gradient with pulsing animation to grab attention.

data-style="prominent"

Search Bar Styles

Ask us anything...

Minimal Search Bar

Transparent background, outlined button.

Ask us anything...

Prominent Search Bar

Colored border, gradient button, enhanced shadow.

Combination Examples

Mix size and style options for the perfect look.

Small + Prominent

Compact but attention-grabbing.

data-size="sm"
data-style="prominent"

Large + Minimal

Large and visible, but subtle styling.

data-size="lg"
data-style="minimal"

Small Icon + Minimal

Smallest possible footprint.

data-display="icon-only"
data-size="sm"
data-style="minimal"

All Options Reference

Complete list of data attributes for configuring the Ask Bar.

Attribute	Values	Default	Description
`data-business`	string	Required	Your business slug or ID
`data-partner`	string	-	Partner network slug (federation mode)
`data-display`	`icon` \| `icon-only` \| `button` \| `search-bar`	`icon`	Display mode
`data-label`	string	Ask	Custom label for button mode
`data-size`	`sm` \| `md` \| `lg`	`md`	Size variant
`data-style`	`minimal` \| `default` \| `prominent`	`default`	Style variant
`data-position`	`bottom-right` \| `bottom-left`	`bottom-right`	Floating button position
`data-color`	hex color	From business config	Override accent color
`data-placeholder`	string	Ask us anything...	Custom placeholder text
`data-mobile`	`true` \| `false`	`true`	Show on mobile devices
`data-delay`	number (ms)	`0`	Delay before showing widget

Full Example

Copy and customize this embed code for your website.

<!-- Viva Ask Bar - Add before closing </body> tag -->
<script
    src="https://ask.goviva.ai/embed.js"
    data-business="your-business-slug"
    data-display="icon"
    data-size="md"
    data-style="default"
    data-position="bottom-right"
    data-color="#4F46E5"
    async
></script>