How to Trigger workflow when an HTML Element is Clicked (Click to Call)

Questions
1

I have an html element setup with click to call functionality. Everything works fine for it and when a user clicks on the HTML the phone will open to make a call.

I am trying to find a way to utilize the JS_toBubble and Expression using the toolbox plugin to make a workflow trigger when the user clicks the HTML with click to call.

I’ve looked through every forum post on the topic and I’ve gotten it setup if the user swipes the click to call to perform a workflow action, but the call is not initiated.

I have it setup where the user can click on the HTML element and trigger a workflow, only when they click the HTML where the call number is not displayed, and so the call doesn’t get initiated.

Has anybody setup things so that the call will initiate and a workflow will get triggered?

2 Likes
2

You can put the HTML element into a group and add the workflow when the group is clicked, which will fire when the HTML.

If you are looking to do this through javascript, then you are looking for .addEventListener

Regards.

1 Like
3

Javascript to Bubble are made for this; I use them a lot. You have to check the “Trigger event” box in the property editor and you’ll be able to find that particular Javascript to Bubble element in the workflow section.

1 Like
4

Of course the easiest solution works. Thanks for pointing out it was more straightforward than I was trying to make it.

5

I was using this setup. Followed some posts on the forum on how to do it and got it working so that I could trigger a workflow successfully. The problem was that when the user clicks the text to initiate the call the trigger doesn’t work, but when they click in the HTML element but not on the text portion it does trigger.

Seems like the use of the click to call function doesn’t allow both to happen (trigger through js to bubble and initiate the call).

Still got to learn a bit about js to bubble and how to setup the workflow trigger from the click of an element though.

6

I’m not 100% sure to follow, but whatever the source of the trigger, when you call the JS to Bubble from javascript (bubble_fn_myFunction()), if the Trigger event box’s checked and you have set a workflow that triggers on that JS to Bubble element, it should always work.

In your HTML content, you can call the function like this:

<button onclick="bubble_fn_myFunction()">Button Text</button>
<a href="javascript:void(0); bubble_fn_myFunction();">Link Text</a>
1 Like
7

@andersan @Jici Chris, Jean Claude,

Care to chime in?

8

Hey, the approach suggested by Julien should work.

A click event listener should do the trick if the area that the user can click on is not a button or link. If it is a button or link, try what Julien suggested.

2 Likes
9

Thanks @julienallard1 for the that example code.

I put it into my app and it works well for triggering the workflow. I tried to incorporate the function for click to call by modifying the code to include the tel like below

<a href="tel:8881113333;javascript:void(0); bubble_fn_group(); ">Link Text</a>

and when I do that the workflow no longer triggers, but the click to call function is initiated.

If I change the code to have the ‘tel’ portion in another location like below

<a href="javascript:void(0); tel:8881113333; bubble_fn_group(); ">Link Text</a>

the workflow is triggered but the click to call doesn’t initiate. Same thing if I have the ‘tel’ at the end like below

<a href="javascript:void(0); bubble_fn_group(); tel:8881113333; ">Link Text</a>

Does something jump out to you as to what I am doing wrong that I can’t get both the workflow to trigger and the click to call to initiate?

10

Ok I hadn’t catch the part where you use the tel: protocol. Whether it’s tel:, javascript: or http:, a link can only have one I believe. So like @yusaney1 mentioned, you need an event listener:

<a href="tel:8881113333" id="myPhone">Link Text</a>

<script>
    document.querySelector('#myPhone').addEventListener('click', () => {
        bubble_fn_group();
    });
</script>
4 Likes
11

Oh this is fantastic. Thank you very much for sharing this. That is exactly what I was looking for.

Works perfectly!

2 Likes
12

Hello, how is everything? Could you explain what the bubble_fn_group is?

13

That is a custom JS function to pass data from custom code to Bubble and/or trigger a Bubble workflow from custom code.

You need the “Javascript to Bubble” element from Toolbox plugin. In the above example, I configure the element with a function named “group” which resolves to bubble_fn_group as explained in the element’s property editor.