Public Interface

There are a number of attributes and methods that we expose to allow you to programmatically control the behavior of the SmartChat and SmartForm.

Initialization options

When initializing the chatloader there are a number of settings that you can define. These are useful to send extra information to the loader, when the initialization snippet is generated server-side.

appId

String, required: Partner unique code. You can get your AppId on the General Settings

window.guuru = window.Guuru();
window.guuru.init({
  appId: 'foobar',
});

category

String: Pre-select a category based on a category id. This is useful for situations where the category can be guessed based on some condition (current page, product, etc). If the passed category exists, it will be automatically selected and the list of categories to choose from will not be displayed to the customer.

window.guuru = window.Guuru();
window.guuru.init({
  appId: 'foobar',
  category: 'laptops',
});

refererType

String: Page type identifier where the chat is being displayed. This value is used to collect insights about the usage of the chat. Examples include "Homepage", "Product" and "Checkout".

window.guuru = window.Guuru();
window.guuru.init({
  appId: 'foobar',
  refererType: 'Checkout',
});

refererTrigger

String: Device type or page element where the chat is being displayed. This value is used to collect insights about the usage of the chat. Examples include broader groups such as "iOS app", "Android App", "Desktop", "Mobile" or more refined groups such as "footer", "main nav" or "bot flow".

window.guuru = window.Guuru();
window.guuru.init({
  appId: 'foobar',
  refererTrigger: 'Mobile App',
});

locale

String: Overrides default language settings by forcing a locale. If the provided value is not configured as an available language selection for the partner then the Default Language set in General Settings will be taken as default.

Accepted values: 'de', 'fr', 'it', 'en'

window.guuru = window.Guuru();
window.guuru.init({
  appId: 'foobar',
  locale: 'en',
});

events

Array<Object>: List of events that you wish to handle. For instance, if you want to run some code each time a new chat flow has started, you can register a callback function for the chat:newChat event.

Check all available events.

window.guuru = window.Guuru();
window.guuru.init({
  appId: 'foobar',
  events: [
    {
      id: 'chat:newChat',
      handler: function () {
        console.log('New chat flow started!');
      },
    },
  ],
});

custom_meta

Array<Object>: Preload the chat request with relevant information. Typically used to transfer information from one context to the chat request.

window.guuru = window.Guuru();
window.guuru.init({
  appId: 'foobar',
  customMeta: {
    'pre check': 'ok',
    'step': '2',
  },
});

".", "#", "$", "/", "[", or "]" characters are not supported in the keys of the customMeta value

utm

Array<Object>: Tracking utm parameters that will the used to track the conversation origin. This can be used to track chats from some specific page.

window.guuru = window.Guuru();
window.guuru.init({
  appId: 'foobar',
  utm: {
    source: 'website',
    medium: 'chat_loader',
    content: 'talk-with-a-guuru-customer',
  },
});

payload

Object: Allows the chatloader to start with initial values. User information can be provided automatically by setting any of name, email and/or smsFallBack. Chat question will not be asked if question is present on payload.

The example below sets the name, email and question. The user won't be asked to type the question nor his name or email.

window.guuru = window.Guuru();
window.guuru.init({
  appId: 'foobar',
  payload: {
    name: 'John Doe',
    email: 'john.doe@mail.com',
    question: 'Hello can you recommend me a new camera?'
  },
});

The example below sets only the name. The user will be asked to type a question. If the email address is configured to be required the user will also be asked to type his email address. However he won't have to type his name, as it is already set to 'John Doe'.

window.guuru = window.Guuru();
window.guuru.init({
  appId: 'foobar',
  payload: {
    name: 'John Doe',
  },
});

user

Object: You can have more information about your visitors if they are logged in users. You may want to provide some details of the user logged in so this information will be available to your agents.

window.guuru = window.Guuru();
window.guuru.init({
  appId: 'foobar',
  user: {
    name: 'John Doe',
    email: 'john.doe@mail.com',
  },
});

purchase

Object: Track when a visitor has completed a purchase event, with currency and value included as a parameter.

window.guuru = window.Guuru();
window.guuru.init({
  appId: 'foobar',
  purchase: {
    value: '55.34',
    currency: 'EUR',
  },
});

loadFeatures

Object: Allows the chatloader to enable or disable specific features when initializing.

By passing this object in the loader, you can control the following features:

  • Analytics - analytics
  • Chat Conversions - conversions
  • Chat Leads - leads
  • Proactive Chat - proactive

Accepted values for each key: true, false.
Default value for each key: true.

If the object is not passed in the chatloader, all the features will be initalized with true.

The example below is disabling the features related with conversions, leads and proactive. Since we are not passing the analytics key, its value will default to true.

window.guuru = window.Guuru();
window.guuru.init({
  appId: 'foobar',
  loadFeatures: {
    conversions: false,
    leads: false,
    proactive: false,
    //analytics: false,
  },
});

launcher

Object: Customize the loader appearance. By passing this object in the loader, you can change the appearance of the loader button.

size

Customize the size of the loader button

Accepted values: 'small', 'medium', 'large'
Default value: 'medium'

window.guuru = window.Guuru();
window.guuru.init({
  appId: 'foobar',
  launcher: {
    size: 'small',
  },
});

position

Customize the position of the loader button

Accepted values: 'bottomRight', 'bottomLeft''
Default value: 'bottomRight'

window.guuru = window.Guuru();
window.guuru.init({
  appId: 'foobar',
  launcher: {
    position: 'bottomRight',
  },
});

Public methods

An instance saved in window.guuru, in addition to the init method described above, exposes the following methods.

openChat()

Opens the chat window.

window.guuru.openChat();

closeChat()

Closes the chat window.

window.guuru.closeChat();

toggleChat()

Opens/Closes the chat.

window.guuru.toggleChat();

showChatLoader()

Shows the chatloader button on the page.

window.guuru.showChatLoader();

hideChatLoader()

Hides the chatloader button from the page.

window.guuru.hideChatLoader();

showCustomAttentionGrabber(title, message)

Opens the attention grabber bubble displaying a title and message.

window.guuru.showCustomAttentionGrabber(
  'This is a title',
  'This is a message that goes below the title',
);

isChatOpened()

Returns the open state of the chat window.

window.guuru.isChatOpened();

isChatClosed()

Returns the close state of the chat window.

window.guuru.isChatClosed();

destroy()

Removes the chat loader from the page and cleanups any resources loaded by it.

window.guuru.destroy();

changeLocale(locale)

Reinitializes the chat with a new locale.

window.guuru.changeLocale('en');

trackPurchase(data)

Track when a visitor has completed a purchase event, with value, currency and an optional goal identifier included as parameters.

window.guuru.trackPurchase({ value: 55.65, currency: 'EUR', goalId: 23 });

Conversion feature must be enabled, please see loadFeatures initialization option

changeCategory(categoryId)

Reinitializes the chat with a new category.

window.guuru.changeCategory('laptops');

attachForm()

Manually attaches the SmartForm to the current page.

window.guuru.attachForm();
← Getting StartedHandling Events →