Chat Widget Ask Bar Booking Widget Get Started Free

Booking Widget

Embeddable booking button that opens a scheduling modal or redirects to your booking page. Multiple styles, sizes, and positions.

4 Button Styles Modal or Redirect 3 Sizes Fixed or Inline

Quick Start

Add a booking button to your website with a single script tag. When clicked, it opens your Viva booking page in a modal overlay.

Prerequisites: Create your booking page at business.goviva.ai → Calendar → Booking Page. You'll need your booking slug (e.g., "acme-corp").

<script
    src="https://book.goviva.ai/embed.js"
    data-slug="YOUR_BOOKING_SLUG"
    async>
</script>

Replace YOUR_BOOKING_SLUG with your booking page slug from the dashboard.

Done! A "Book Now" button will render where the script tag is placed. Clicking it opens your booking page in a modal.

Script Tag Installation

The simplest method. Add the script tag where you want the button to appear:

<script
    src="https://book.goviva.ai/embed.js"
    data-slug="acme-corp"
    data-text="Schedule a Consultation"
    data-style="primary"
    data-size="large"
    async>
</script>

All configuration is done via data-* attributes on the script tag.

Container Element

For more control over placement, use a container div with data attributes, and include the script separately:

<div id="viva-book-button"
     data-slug="acme-corp"
     data-text="Schedule Now"
     data-style="primary"
     data-size="large">
</div>
<script src="https://book.goviva.ai/embed.js" async></script>

When both a container element and script tag have data attributes, the container element's attributes take priority.

Attributes Reference

Attribute Default Options Description
data-slug — string Required. Your booking page slug
data-text "Book Now" any string Button display text
data-style "primary" primary, secondary, outline, minimal Button visual style
data-size "medium" small, medium, large Button size
data-target "modal" modal, blank, self How the booking page opens
data-position "inline" inline, fixed-bottom, fixed-right Button placement on page
data-service — string Pre-select a specific service

Button Styles

primary (Default)

Solid indigo button with white text. Best for primary CTAs.

<script src="https://book.goviva.ai/embed.js"
    data-slug="acme-corp"
    data-style="primary" async></script>

secondary

Light gray background with dark text. Pairs well alongside primary buttons.

<script src="https://book.goviva.ai/embed.js"
    data-slug="acme-corp"
    data-style="secondary" async></script>

outline

Transparent background with indigo border. Fills on hover.

<script src="https://book.goviva.ai/embed.js"
    data-slug="acme-corp"
    data-style="outline" async></script>

minimal

Text-only link style with underline on hover. No background or border.

<script src="https://book.goviva.ai/embed.js"
    data-slug="acme-corp"
    data-style="minimal" async></script>

Button Sizes

Size Padding Font Size
small 8px 16px 13px
medium (default) 12px 24px 15px
large 16px 32px 17px

Button Positions

inline (Default)

Renders the button exactly where the script tag is placed in the DOM. Use this for embedding within page content.

fixed-bottom

Fixed button centered at the bottom of the viewport. Always visible as the user scrolls.

<script src="https://book.goviva.ai/embed.js"
    data-slug="acme-corp"
    data-position="fixed-bottom"
    data-text="Book Now" async></script>

fixed-right

Fixed button in the bottom-right corner. Stays visible on scroll.

<script src="https://book.goviva.ai/embed.js"
    data-slug="acme-corp"
    data-position="fixed-right"
    data-text="Book Now" async></script>

Z-index: Fixed position buttons use z-index: 9999. If they're hidden behind other elements, check for competing z-index values on your page.

Open Targets

Control how the booking page opens when the button is clicked:

Target Behavior
modal (default) Opens an overlay modal with the booking page in an iframe. Users stay on your site. ESC or clicking outside closes it.
blank Opens the booking page in a new browser tab/window.
self Navigates the current page to the booking URL. User leaves your site. 
<!-- Open in new tab instead of modal -->
<script src="https://book.goviva.ai/embed.js"
    data-slug="acme-corp"
    data-target="blank" async></script>

Link directly to a specific service on your booking page using data-service:

<script src="https://book.goviva.ai/embed.js"
    data-slug="acme-corp"
    data-service="consultation"
    data-text="Book a Consultation" async></script>

This generates the URL: https://book.goviva.ai/acme-corp?service=consultation

You can have multiple booking buttons on the same page, each linking to a different service:

<!-- Consultation -->
<script src="https://book.goviva.ai/embed.js"
    data-slug="acme-corp"
    data-service="consultation"
    data-text="Book Consultation" async></script>

<!-- Demo -->
<script src="https://book.goviva.ai/embed.js"
    data-slug="acme-corp"
    data-service="demo"
    data-text="Schedule Demo"
    data-style="outline" async></script>

Troubleshooting

Button Not Appearing

  1. Check the script URL: Ensure it's https://book.goviva.ai/embed.js
  2. Verify the slug: Visit https://book.goviva.ai/YOUR_SLUG directly to confirm it works
  3. Check console: Open DevTools (F12) and look for errors
  4. Ad blockers: Some may block third-party embed scripts

Modal Not Opening

  1. Ensure no JavaScript errors on the page prevent the click handler
  2. Check that another modal or overlay isn't intercepting clicks
  3. Try data-target="blank" as a fallback

Button Overlapping Content

Support