Customization

JavaScript SDK

After the widget is initialized, you can control it programmatically using varda() commands.

Open, close, and toggle

Open or close the chatbox from custom buttons on your website:

<button onclick="varda('open')">Chat with us</button>

<button onclick="varda('close')">Close chat</button>

<button onclick="varda('toggle')">Toggle chat</button>

All commands

Command	Alias	Effect
`varda('open')`	`varda('chat:open')`	Opens the chatbox
`varda('close')`	`varda('chat:close')`	Closes the chatbox
`varda('toggle')`	`varda('chat:toggle')`	Toggles open/closed

Example: custom chat button

<style>
  .chat-cta {
    position: fixed;
    bottom: 100px;
    right: 24px;
    background: #4f46e5;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
</style>

<button class="chat-cta" onclick="varda('open')">
  Need help? Chat with us
</button>

Example: open on page event

// Open chat after 30 seconds
setTimeout(() => varda('open'), 30000);

// Open chat when user scrolls to a section
const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    varda('open');
    observer.disconnect();
  }
});
observer.observe(document.getElementById('pricing'));

Set user data

Pre-fill visitor information if you already know who they are (e.g., logged-in users):

varda('setUser', {
  name: 'Jane Doe',
  email: 'jane@example.com',
  phone: '+18005551234'
});

This pre-fills the pre-chat form fields. Call this before or after varda('init').

Set custom data

Attach custom metadata to the conversation:

varda('setData', {
  plan: 'pro',
  company: 'Acme Corp',
  accountId: '12345'
});

Custom data is sent when a conversation starts and can be used by agents for context.

Hide the default launcher

If you want to use only custom buttons and hide the floating chat bubble, you can use CSS:

<style>
  .varda-launcher { display: none !important; }
</style>

Then use varda('open') from your own buttons to control the chatbox.

Full SDK reference

Command	Arguments	Description
`varda('init', widgetId)`	`widgetId: string`	Initialize the widget
`varda('init', widgetId, options)`	`options: { trackingOnly?, poolToken?, apiUrl? }`	Initialize with options
`varda('open')`	—	Open the chatbox
`varda('close')`	—	Close the chatbox
`varda('toggle')`	—	Toggle the chatbox
`varda('setUser', data)`	`{ name?, email?, phone? }`	Pre-fill user info
`varda('setData', data)`	`Record<string, any>`	Attach custom metadata