Frontend Actions

info

Bettermode frontend actions are currently in Beta and not available to all customers.

You can perform actions such as opening a modal, toast, confirmation, or alert using window.BM (or BM) after Bettermode app is fully loaded.

note

Please note that you can only perform Bettermode frontend actions when Bettermode application is in the ready state. As a result, should use BM.on('ready') before these actions.

Toast

Toasts are useful when you want to inform members about the status of something. Please note that toasts are not blocking and they are shown at the top right corner of the window.

You can easily use the following script to open a toast:

<script>
  window.BM.on('ready', function() {
    window.BM.toast({
      title: 'Yayyy!',
      description: 'You are awesome!',
      status: 'success'
    })
  })
</script>

Alert

Alerts can be used to show the result of an action. Alerts are blocking and they cover the screen until the member closes the alert or click on the proceed button. Alerts always include one button.

Here is an example of an alert action:

<script>
  window.BM.on('ready', function() {
    window.BM.alert({
      title: 'You are amazing!',
      description: 'This is to let you know that you are amazing.',
      proceedLabel: 'I know',
      danger: false
    }).then(function() {
        console.log('Alert is now closed.')
    })
  })
</script>

The only required option for BM.alert is the title. You can set danger to true in order to show a destructive event.

BM.alert returns a Promise and as a result you can use .then() to define what should happen after the alert is closed.

Confirm

BM.confirm is exactly similar to BM.alert with one big difference: it has proceed and cancel buttons and returns true for proceed or false for cancel or close as the result of the promise.

Here is an example of a confirmation action:

<script>
  window.BM.on('ready', function() {
    window.BM.confirm({
      title: 'Are you sure?',
      description: 'We just want to make sure that you are sure.',
      proceedLabel: 'Yes',
      cancelLabel: 'No',
      danger: true
    })
  })
</script>

Similar to BM.alert, the only required option for BM.confirm is the title.