Skip to content

Examples

Examples, snippets, tips

Show teaser 10 seconds after page is loaded

const client = Dialogshift.instance({
  id: '%id%',
  teaserText: '👋🏻 Hi, can I help you?',
})

client.on('init', () => {
  setTimeout(() => {
    if (!client.isChatboxVisible()) {
      client.showTeaser()
    }
  }, 10 * 1000)
})

Read values from webchat config

Create welcome-demo element in CMS page and define triggerElement value in a webchat config.

"triggerElement": "welcome-demo",
const client = Dialogshift.instance({
  id: '%id%',
})

// Webchat config is available after chat is initialized
let triggerElement = null

client.on('init', () => {
  const config = client.getConfig()
  triggerElement = config.triggerElement // 'welcome-demo'

  client.showChatbox()
})

client.on('ready', () => {
  if (triggerElement) {
    client.triggerElement({
      successor: triggerElement,
    })
  }
})

Save first visit timestamp

const client = Dialogshift.instance({
  id: '%id%',
})

client.on('ready', () => {
  client.getContext('firstVisitTime').then(firstVisitTime => {
    // Save timestamp if user is first time here
    if (firstVisitTime === null) {
      client.setContext('firstVisitTime', new Date().getTime())
    } else {
      console.log(firstVisitTime)
    }
  })
})

Trigger message for returned user

const client = Dialogshift.instance({
  id: '%id%',
})

client.on('ready', () => {
  client.getContext('isFirstVisit').then(isFirstVisit => {
    if (isFirstVisit) {
      client.setContext('isFirstVisit', false)
    } else {
      client.triggerElement({
        successor: 'welcome-back',
      })
    }
  })
})

Grab user attention with an unread counter

const client = Dialogshift.instance({
  id: '%id%',
})

const sendButton = document.querySelector('#send-button')

sendButton.addEventListener('click', () => {
  client.increaseUnreadCounter(1)
})

Suppress or change initial element

const client = Dialogshift.instance({
  id: '%id%',
  initialElement: {
    successor: 'welcome-message',
  },
})

// Suppress initial element
setTimeout(() => {
  client.setInitialElement({
    suppress: true,
  })
  client.showChatbox()
}, 5000)

// Change initial element
setTimeout(() => {
  client.setInitialElement({
    successor: 'welcome-message-2',
  })
  client.showChatbox()
}, 5000)

Trigger an element based on placing cursor in input field

<form>
  <input type="email" id="email-field" />
</form>
const client = Dialogshift.instance({
  id: '%id%',
  initialElement: {
    successor: 'welcome-message',
  },
})

const emailField = document.querySelector('#email-field')

emailField.addEventListener('focus', () => {
  // Suppress initial element 'welcome-message' and trigger element
  client.triggerElement({
    suppressInitialElement: true,
    successor: 'email-form-focus',
  })

  if (!client.isChatboxVisible()) {
    // Trigger element and don't expand chatbox
    client.triggerElement({
      showChatbox: false,
      suppressInitialElement: true,
      successor: 'email-form-focus-hidden',
    })
  }
})

Show localized teaser

// Example for a URL pattern www.domain.zone/en/url-name
const parseLocale = defaultLocale => {
  const urlParts = window.location.pathname.split('/')
  const locales = ['en', 'de']

  if (urlParts.length && urlParts[1]) {
    const locale = urlParts[1]

    if (locales.indexOf(locale) !== -1) {
      return locale
    }
  }

  return defaultLocale
}

const showTeaser = locale => {
  const chatInstance = Dialogshift.instance()

  if (locale === 'en') {
    chatInstance.setTeaserText('Hello, can we<br>help you?')
  } else {
    chatInstance.setTeaserText('Hallo, können wir<br/>Ihnen weiterhelfen?')
  }

  chatInstance.showTeaser()
}

// Parse locale from a current URL
const locale = parseLocale('de')
const client = new Dialogshift.instance({
  id: '%id%',
  locale: locale,
})

// Wait 5 seconds and show teaser
setTimeout(() => {
  showTeaser(locale)
}, 5000)