How to use Softr logged in user data into your chatbot

If you are building a Softr website and you want to add a chatbot for people that are logged in, you can transfer user data to your Joonbot easily. No need to ask for the name and email again!

Let's say you have a donation website with a user session, and you want to have a chatbot that starts the conversation by saying "Hello, First Name".

Here are the steps to follow:

1. We will start with a template. Let's use the "donation tracker" template that has a logged-in system already implemented.

2. Now, go to the signup page and click on the signup block.

3. We want to call the user by his first name, so we need to set up Airtable to personalise the user data. So we set up Airtable instead of the Softr in-house database.

4. For the setup, you'll need your Airtable API key that you can find in your account settings. You can click on the dots and the key will appear. You can now copy and paste it into Softr.

5. Now, click on "Copy the template base" button.

6. And copy the base in your Airtable account.

7. Now, go back to Softr, click on "Click here to refresh", find and select your Airtable base and click on the "Finish" button.

8. Go to your Airtable and create two new fields, "First name" and "Last name", that will replace the "Name" one. Don't remove the "Name" one because Airtable is looking for it anyway.

9. Go back to Softr and create the two fields "First name" and "Last name" in your signup block. Link them to your Airtable by choosing the right variables in the field settings. Deactivate the field "Name" as we don't need it anymore.

10. Pick a page for logged-in users only and add a custom code block.

11. Go to your Joonbot account and copy the widget script of your Joonbot. 

12. Paste the code into Softr with the new line below.

window.JB_FIRST_NAME= window.logged_in_user['First name'];

This new line will transfer the name of the user logged in from Softr to Joonbot so that Joonbot can reuse the name in the conversation.

Here is what the script looks like:

<script async type="text/javascript">
!function () {
if (window.JOONBOT_WIDGET_ID) {
console.warn("Joonbot snippet included twice");
} else {
window.JOONBOT_WIDGET_ID = "your_widget_id";
window.JB_FIRST_NAME= window.logged_in_user['First name'];
var n, o;
o = document.createElement("script");
o.src = "https://js.joonbot.com/init.js", o.defer = !0, o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous";
n = document.getElementsByTagName("script")[0], n.parentNode.insertBefore(o, n);
}
}()
</script>

13. As you can see below, we created the variable "JB_FIRST_NAME" so we can reuse it in our Joonbot conversation. So let's add a "Hello {{JB_FIRST_NAME}} to the first block of our chatbot.

🚨 The variables you add in your scripts always have to start with "JB_".

14. Let's test everything now. Publish, open your website on a tab, sign up and go to the page where you installed your chatbot.

15. Tadaaammm! 😁