Execute some JavaScript code at some points of your conversation.

When do I need to use a JavaScript block?

Sometimes, you need to modify your web page during the conversation. You want to launch a video, redirect the user to another web page, etc.

Also, sometimes you want to execute some JavaScript code you wrote inside your web page.

You could also need to call your API from the front end.

Whatever the use case, you can do all that with the JavaScript block.

Let's take an example of an e-learning chatbot I've made.

On the left side of my web page, I added a bot, and the right side is dedicated to knowledge content.

During the conversation, the students learn, through videos, notions of trigonometry.

So, I need to trigger specific videos at specific moments of the conversation.

Here is what it looks like:

How can I trigger functions with the JavaScript block?

To trigger functions with the JavaScript block, you need to put some JavaScript code in it.

The JavaScript code can be:

• usual functions that impact your web page (DOM)
• some functions you created yourself within your web page
• functions that call your API from the front end

In the example below, after the student clicks on the "Unit circle introduction" button, the JavaScript block is triggered and executes the following actions:

• hide the image element
• show the video element
• launch a specific youtube video in autoplay mode

You'll find the code below:

Do you know you can add event trackers for Google and Facebook ads via the JS block?

Tracking events with Google ads.

Before you can do anything on Joonbot related to google ads tracking, you will need to have a "global site tag" from Google ads. You can obtain and install the tag yourself by following the steps we've curated to help you.

Once you're done with that, you can add a javascript block, add the following code, by replacing AW-CONVERSION_ID with your own AW code from the global site tag.

window.gtag('event', 'conversion', {'send_to': 'AW-CONVERSION_ID'})

If you are using Google Tag Manager (GTM),

If you have GTM installed on your website, you can create custom properties to be added to the Google ads manager. We have a step-by-step tutorial curated for your reference, which you can find in the same article as referenced above.

Tracking events with Facebook ads.

Facebook has its own piece of code that you place on your website, allowing you to monitor conversions. You have to find the code on your Events Manager and add it to every page wherever you want to add the tracking feature. You can find how to do that in our dedicated article for facebook ads.

Once you're done with that, the rest is easy-peasy. When you add your Javascript block (at the place where you want to trigger the conversation tracking feature), you will activate a LeadGenerated standard event using a Javascript block. Like below.

So, when a user reaches this specific point, you will activate a LeadGenerated standard event using a Javascript block. Like below.

fbq('track', 'LeadGenerated');

You now have the Facebook ads conversation tracking with the help of Javascript blocks.

You are done, congrats!