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 webconfig

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

// Webconfig is available after chat is initialized
client.on('init', () => {
  const config = client.getConfig()
  const showTeaserAfter = config.showTeaserAfter ? config.showTeaserAfter : 5
  const hideTeaserAfter = config.hideTeaserAfter ? config.hideTeaserAfter : 15
  const unreadCounter = config.setUnreadCounter

  if (unreadCounter) {
    client.setUnreadCounter(unreadCounter)
  }

  setTimeout(() => {
    client.showTeaser()
  }, showTeaserAfter * 1000)

  setTimeout(() => {
    client.hideTeaser()
  }, hideTeaserAfter * 1000)
})

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)
})

Skip initial element for the first open

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

// example form
const form = document.querySelector('#order-form')

form.addEventListener('submit', () => {
  if (!client.isChatboxVisible()) {
    client.showChatbox({
      triggerInitialElement: false,
    })
  }
})

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: 'welcome-message',
})

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

emailField.addEventListener('focus', () => {
  // If chatbox is visible we just trigger needed element
  if (client.isChatboxVisible()) {
    client.triggerElement({
      successor: 'email-form-focus',
    })
  }

  // If chatbox is hidden but loaded
  // we handle chat opening to be sure user pays attention to the new message
  // we open chat and trigger needed element
  if (!client.isChatboxVisible() && client.isReady()) {
    client.once('chatbox.show', () => {
      client.triggerElement({
        successor: 'email-form-focus',
      })
    })

    client.showChatbox()
  }

  // If chatbox is hidden and not loaded
  // we handle chat loading
  // skip initial element and open chat box
  // trigger needed element
  // If chatbox will be hidden unread counter will increase
  // othewise user will see triggered element
  if (!client.isChatboxVisible() && !client.isReady()) {
    client.once('ready', () => {
      client.triggerElement({
        successor: 'email-form-focus',
      })
    })
  }
})

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)