Automatically open Webchat on page load

You can automatically open Webchat when a user visits your website.

On any visit to your website

To open Webchat every time a user visits your website, add the following script to your website’s source code:

window.botpress.on('webchat:initialized', (event) => {
  setTimeout(() => {
    window.botpress.open()
  }, 500)
})

This waits until Webchat has been initialized, then opens the Webchat window.

On visits with a specific link

You can also use a URL hash (#) to create a custom link that opens Webchat automatically on your website. For example:

• botpress.com/docs: Opens the Botpress documentation
• botpress.com/docs#ask: Opens the Botpress documentation, then opens Webchat

To create the link, add the following script to your website’s source code:

window.botpress.on('webchat:initialized', (event) => {
  setTimeout(() => {
    if (window.location.hash === '#ask') {
      window.botpress.open()
    }
  }, 500)

  window.addEventListener('hashchange', () => {
    if (window.location.hash === '#ask') {
      window.botpress.open()
    }
  })
})

This waits until Webchat has been initialized, then opens the Webchat window if the URL contains the #ask hash. You can change the hash itself to anything you like.

Limitation when manually initializing Webchat

If you’re manually initializing Webchat, make sure you execute either of the code snippets above before you call window.botpress.init:

// First, execute this:
window.botpress.init({
  botId: 'xxxxxxxxxxxxxxxxxxxxxx',
  configuration: {
    website: {},
    email: {},
    phone: {},
    termsOfService: {},
    privacyPolicy: {},
    variant: 'soft',
    themeMode: 'light',
    fontFamily: 'inter',
  },
  clientId: 'xxxxxxxxxxxxxxxxxxxxxx',
})

// Then, execute this:
window.botpress.on('webchat:initialized', (event) => {
  setTimeout(() => {
    window.botpress.open()
  }, 500)
})

Otherwise, the event listener will miss the initialization event, and Webchat won’t open.