Skip to main content

Frontend Actions

info

Tribe 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.Tribe (or in short Tribe) after Tribe app is fully loaded.

note

Please note that you can only perform Tribe frontend actions when Tribe application is in the ready state. As a result, should use Tribe.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.Tribe.on('ready', function() {
window.Tribe.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.Tribe.on('ready', function() {
window.Tribe.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 Tribe.alert is the title. You can set danger to true in order to show a destructive event.

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

Confirm#

Tribe.confirm is exactly similar to Tribe.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.Tribe.on('ready', function() {
window.Tribe.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 Tribe.alert, the only required option for Tribe.confirm is the title.