Table of Contents

How to add a Click-to-Call/Email/WhatsApp button

Pau Sanchez Updated by Pau Sanchez

In case you want to redirect the user to another url please check this other article

Or if you want to try it out, check the bottom-right widget ;)

For Landbot (Web)

Click-to-Call - Redirect visitor to a phone number

In our bot, after a button we will add a Code Block, like in the picture below:

With the following code:

window.location.href = 'tel:+3411223344'

Or you can use a variable:

window.location.href = 'tel:@{phone}'

In case you want to open a new window, the best approach would be like this:

<a href = 'tel:+3411223344' target="_blank" >Click to call</a>
Click to Email

The process will be as follows:

In our bot, after a button we will add a Code Block, like in the picture below:

With the following code:

window.location.href = 'mailto:feedback@landbot.io'

Or you can use variables

window.location.href = 'mailto:@{email}'

Change the email according to your needs.

Even you can set up the subject and the content of the email (encoded)

mailto:@{email}?subject=Subject&body=message%20goes%20here

Click to WhatsApp

The process will be as follows:

In our bot, after a button we will add a Code Block, like in the picture below:

With the following code:

window.location.href ='https://api.whatsapp.com/send?phone=34123123123'

Or you can use variables:

window.location.href ='https://api.whatsapp.com/send?phone=@{phone}'

Change the phone according to your needs.

In Landbot 2

Click-to-Call - Redirect visitor to a phone number

This Workaround is suitable for embedded bots. It is not intended to be used with the Share URL option.

The process will be as follows:

  1. In our bot, after a button we will add a Code Block, like in the picture below:

With the following code:

Landbot.send('sendto','tel:+3411223344')

Change the phone number according to your needs.

  1. In the site where the bot is embedded you need to add the following code (it will trigger the redirection):

myLandbot.on('sendto',(data) => { 
window.location.href = data;
})

Click to Email

The process will be as follows:

  1. In our bot, after a button we will add a Code Block, like in the picture below:

With the following code:

Landbot.send('sendto','mailto:feedback@landbot.io')

Change the email according to your needs.

  1. In the site where the bot is embedded you need to add the following code (it will trigger the redirection):
    myLandbot.on('sendto',(data) => { 
    window.location.href = data;
    })

Click to WhatsApp

The process will be as follows:

  1. In our bot, after a button we will add a Code Block, like in the picture below:

With the following code:

Landbot.send('sendto','https://api.whatsapp.com/send?phone=34123123123')

Change the phone according to your needs.

  1. In the site where the bot is embedded you need to add the following code (it will trigger the redirection):

myLandbot.on('sendto',(data) => { 
window.location.href = data;
})

For WhatsApp

This workaround is not compatible with WhatsApp bots

For Facebook Messenger

This workaround is not compatible with Messenger bots

How did we do?

Send variables from your page (the container site) to your embedded Landbot

Contact