Visitor UI JavaScript API


The boot method is responsible for bootstrapping Velaro chat with necessary configurations and mounting the chat window to the DOM. This call will be included in the code copied from the chat designer, but is documented here for more information on configuration options.

var config = {
  // siteId will be included in your deployment script.
  // This value should not be changed.
  siteId: [your siteId],

  // When groupId is zero, it will send all chats through
  // the default group. To get a specific groupId, change
  // groups in the chat designer and view the deployment
  // script.
  groupId: 0,

  // This option disables inline chat. You can set this to
  // true if you only want to use popout chat or use other
  // api methods without displaying inline chat.
  disableInline: false,

  // This option disables the chat launcher. If you want to
  // customize the behavior or appearance of the chat launcher
  // beyond the capabilities of the chat designer, set this
  // to true and use other API methods to display and hide the
  // chat window and launcher.
  disableLauncher: false,

  // If a chat session should persist across subdomains, this
  // value should be set. For example, if a chat is started on
  //, and the user navigates to,
  // cookieDomain should be set to ''
  cookieDomain: '',

  // Custom vars allow you to persist custom data with a chat.
  // This unlocks the potential to design custom routing rules
  // and invitation rules and is also useful for certain CRM
  // integrations.
  customVars: {
    customerId: "s9d8fh9s8dgfsdf",
    cartValue: 53.99

var callback = function() {
  // this callback is optional
  console.log("fires after the chat window has been rendered to the DOM.")

Velaro('boot', config, callback)


Destroys the inline chat window.



Expands the inline chat window.



Collapses the inline chat window.



Returns true if the window is expanded and false if it is not.

var isExpanded = Velaro('isExpanded')

if(isExpanded) {
  console.log('chat is expanded')
} else {
  console.log('chat is collapsed')


Pops the chat window out into a new window.



Fires a callback when the chat window has been expanded.

Velaro('onExpand', function(){ console.log('expanded') })


Fires a callback when the chat window has been collapsed.

Velaro('onCollapse', function(){ console.log('collapsed') })


Hides or shows the chat launcher.

// hide the launcher
Velaro('setLauncherVisibility', 'hidden')

// show the launcher
Velaro('setLauncherVisibility', 'visible')


Check agent, group, and scheduling status to determine if an agent is available to chat.

Velaro('isChatAvailable', function(isAvailable) {
  if(isAvailable) {
    console.log('agent is available to chat')
  } else {
    console.log('agent is not available')

This method can also be used to show or hide an image based on agent availability.

Velaro('isChatAvailable', function(isAvailable) {
  if(isAvailable) {
  } else {


Fires a callback when the visitor enters a queue.

Velaro('onQueueEntered', function(){ 
	console.log('visitor entered queue') 


Fires a callback when the visitor is assigned to an agent.

Velaro('onAgentAssigned', function(){ 
	console.log('visitor assigned to agent')


Fires a callback whenever the visitor receives a message during a chat containing the message. (For both visitor or agent sent messages.)

Velaro('onReceiveMessage', function(message){ 
	if (message.lineCreator === 4){	
		console.log('visitor sent a message')
	} else if (message.lineCreator === 1){
		console.log('agent sent a message')


Fires a callback containing an array of all agents currently typing whenever an agent begins or stops typing.

Velaro("onAgentTyping", function(agentsTyping) {
	console.log("currently typing agents: ", agentsTyping);


Fires a callback when the visitor closes the chat window.

Velaro("onChatClosed", function() {
	console.log("chat window closed");


Fires a callback when the agent closes the chat.

Velaro("onAgentClosed", function() {
	console.log("agent closed chat");


Fires a callback when the visitor is shown a pre-chat survey.

Velaro("onShowPrechatSurvey", function() {
	console.log("pre-chat survey shown");


Fires a callback when the visitor is shown a post-chat survey.

Velaro("onShowPostchatSurvey", function() {
	console.log("post-chat survey shown");


Fires a callback when the visitor is shown an unavailable survey.

Velaro("onShowUnavailableSurvey", function() {
	console.log("unavailable survey shown");


Fires a callback when the visitor is shown unavailable html

Velaro("onShowUnavailableHtml", function() {
	console.log("unavailable html shown");


Fires a callback when the visitor is shown an unavailable url

Velaro("onShowUnavailableUrl", function() {
	console.log("unavailable url shown");


This method will mount a chat button within the provided DOM element. This button will automatically update as agent availability changes. See to configure the appearance of the button.

Velaro('mountDynamicButton', {
  el: document.getElementById('your-button-container')


Creates a conversion record

Velaro('addConversion', {
  // the id of your conversion can be found at
  conversionId: [your conversion id],

  dollarAmount: 49.99,

  // optional parameters to persist with the conversion
  customData: {
    customerId: '9283gf9823gf98g'