Your Viewers embed code contains several data attributes that control how your widget looks and behaves. These are set automatically when you generate your code in the dashboard, but advanced users can also modify them manually.
This reference explains each available option.
How Embed Code Attributes Work
Your embed code looks something like this:
<script
src="https://app.viewers.com/widget/widget.js"
data-token="abc123"
data-position="corner-right"
data-disabled="feedback,share"
async>
</script>Each data- attribute controls a specific aspect of your widget. Some attributes are available on all plans, while others require a PRO subscription.
Core Attributes
data-token
Required. Your unique account identifier, generated automatically by the app.
data-token="your-unique-token"Do not modify this value. If your token is incorrect, your widget won’t load and leads won’t be captured.
data-position
Controls which corner of the screen the widget appears in.
Available options:
corner-right- Bottom-right corner (default)corner-left- Bottom-left corner
data-position="corner-right"data-load
Controls when the widget loads on the page.
Available options:
- Not set - Widget loads on scroll (default)
instantly- Widget loads immediately when the page loads
data-load="instantly"If you want the widget visible as soon as visitors land on your page, set this to instantly. Otherwise, leave it unset for scroll-triggered loading.
async / defer
Added to the end of your script tag to control how the script loads relative to your page content.
Available options:
async- Script loads asynchronously (recommended)defer- Script loads after HTML parsing completes
<script src="..." data-token="..." async></script>or
<script src="..." data-token="..." defer></script>Both prevent the widget from blocking your page load. Choose based on your preference; async is the default.
Module Controls
data-disabled
Controls which modules are hidden from your widget. Comma-separated list.
Available options:
custom- Custom module (Pro only)chat- AI-powered live chat (Pro only)newsletter- Newsletter signupdiscount- Spin to Win / discount moduleshare- Social share modulecontactus- Contact Us formfeedback- Feedback module
data-disabled="feedback,share,discount"Note: At least one module must remain enabled. You cannot disable all seven.
Close Button Behavior
data-close
Controls what happens when a visitor clicks the close button.
Available options:
- Not set - Closes the widget permanently for that session (default)
minimize- Minimizes the widget to a small bubble instead of closing
data-close="minimize"This attribute has no effect if the close button is hidden via data-options="noclose".
Data Options
data-options
A comma-separated list of additional behavior flags.
Available options:
| Option | Plan | Description |
|---|---|---|
nostatus | PRO | Hides the online status indicator (green circle and “Online” text) in the AI chat module |
noclose | PRO | Hides the close button entirely and disables data-close |
data-options="nostatus,noclose"AI Chat Module Settings
These attributes control the AI-powered live chat module. All require a PRO plan.
data-phrase (PRO)
Provides business context to the AI chat for more relevant responses. Set this to a brief description of your business type.
data-phrase="roofing"data-phrase="landscaping"data-phrase="digital%20marketing%20agency"data-availability (PRO)
Sets the live chat availability schedule. The widget will show online/offline status based on this schedule.
Format: Day+StartTime-EndTime for each day, followed by timezone, optionally followed by holidays.
data-availability="Mo0900-1700,Tu0900-1700,We0900-1700,Th0900-1700,Fr0900-1700,UTC-05:00,holidays"Breaking down the example:
Mo0900-1700- Monday, 9:00 AM to 5:00 PMTu0900-1700- Tuesday, 9:00 AM to 5:00 PMWe0900-1700- Wednesday, 9:00 AM to 5:00 PMTh0900-1700- Thursday, 9:00 AM to 5:00 PMFr0900-1700- Friday, 9:00 AM to 5:00 PMUTC-05:00- Eastern Time (adjust to your timezone)holidays- Automatically hides status on major holidays
Day codes: Mo, Tu, We, Th, Fr, Sa, Su
Note: This attribute is hidden/ignored if nostatus is set in data-options, since hiding the status makes scheduling irrelevant.
Custom Module Settings
These attributes control the Custom module. All require a PRO plan and only appear if the Custom module is enabled.
data-custom-label (PRO)
The label displayed for the custom module on desktop screens.
data-custom-label="Request a Quote"data-custom-mobile-label (Pro)
The label displayed on mobile screens. Keep this shorter than the desktop label to fit smaller screens.
data-custom-mobile-label="Quote"data-custom-icon (Pro)
The icon displayed next to the mobile label. Select from the available icon library in the dashboard.
data-custom-icon="telephone-handle-silhouette.png"data-custom-instruction (Pro)
The instruction text shown to users in the custom module. Must be URL-encoded.
data-custom-instruction="Drop%20us%20a%20message"Plain text: “Drop us a message”
Encoded: Drop%20us%20a%20message
data-custom-button (Pro)
The text displayed on the submit button. Must be URL-encoded.
data-custom-button="Call%20Us"Plain text: “Call Us”
Encoded: Call%20Us
data-custom-redirect (Pro)
A custom URL to redirect visitors to after they submit the form. If not set, a generic thank-you message is displayed.
data-custom-redirect="https://yoursite.com/thank-you"Spin to Win / Discount Settings
data-coupon
Configures the Spin to Win discount module. Only appears if the discount module is enabled.
Format: discounttype-discountamount-couponcode
data-coupon="percent-10-SAVE10"Breaking down the example:
percent- Discount type (percentage)10- Discount amount (10%)SAVE10- Coupon code displayed to the winner
Discount type options:
percent- Percentage discount (e.g., 10% off)dollar- Fixed dollar amount (e.g., $10 off)
Discount amount: Any number from 1–9999
Coupon code: Alphanumeric characters only
More examples:
data-coupon="dollar-25-SAVE25NOW"data-coupon="percent-15-WELCOME15"Contact Us Module Settings
data-contact
Customizes the label for the Contact Us module. If “Contact Us” doesn’t fit your use case, choose from preset alternatives that better match your offer.
data-contact="request-quote"Available options:
| Value | Desktop Label | Mobile Label |
|---|---|---|
request-quote | Get Quote | Quote |
request-demo | Get Demo | Get Demo |
free-consultation | Free Consult | Consult |
schedule-call | Book Call | Call Us |
get-pricing | Get Pricing | Pricing |
book-appointment | Book Now | Book Now |
get-started | Start Now | Start |
free-trial | Free Trial | Try Free |
free-estimate | Free Estimate | Estimate |
talk-expert | Talk to Us | Contact |
If not set, the default “Contact Us” label is used.
Examples:
data-contact="schedule-call"data-contact="free-estimate"Choose the option that best describes what happens when visitors reach out. A roofing company might use free-estimate, while a SaaS product might use request-demo or free-trial.
Branding
data-logo (Pro)
Controls visibility of Viewers branding on the widget.
Available options:
- Not set - Viewers branding is visible (default)
hidden- Removes Viewers branding
data-logo="hidden"Quick Reference Table
| Attribute | Plan | Description |
|---|---|---|
data-token | All | Your unique account identifier (required) |
data-position | All | Widget corner position |
data-load | All | When widget loads (scroll vs instant) |
data-disabled | All | Which modules to hide |
data-close | All | Close button behavior |
data-contact | All | Change the “Contact Us” label |
data-options | PRO | Additional flags (nostatus, noclose) |
data-phrase | PRO | AI chat business context |
data-availability | PRO | AI chat schedule |
data-custom-label | PRO | Custom module desktop label |
data-custom-mobile-label | PRO | Custom module mobile label |
data-custom-icon | PRO | Custom module mobile icon |
data-custom-instruction | PRO | Custom module instruction text |
data-custom-button | PRO | Custom module button text |
data-custom-redirect | PRO | Custom module redirect URL |
data-coupon | All | Spin to Win configuration |
data-logo | PRO | Hide Viewers branding |
async / defer | All | Script loading behavior |
Need Help?
If you have questions about configuring your embed code or need help with advanced customization, contact us.