Inserting JavaScript Snippet

Hi. We’re using a chat tool in our app called crisp. We’d like to be able to know who we’re chatting with. This can be done with a JavaScript call. Does anyone know how to implement the following in Bubble?


1 Like

Run the action “Custom Code Block” using the PlugBubble Plugin.

1 Like

Hi @jarrad, I work with @kramwe. We’re running the current JS script for Crisp within the page element. We don’t understand what to do with these 2 lines of code to pass a user’s email to Crisp? …could you give us a bit more detail?

Thanks!

i dont know Crisp but looking at the code you have there, your user would log in to your app, and on doing so you would do something like on page load if current user is logged in, run custom code block,

$Crisp.push([“set”, “user:email”, CURRENTUSERSEMAIL]);

to set the elements email placeholder. does that sound about right?

1 Like

Yep, makes sense.

Would we just leave out this code then?
var vistor_email = $crisp.get("user:email");

Hey @sridharan.s,

You have two options when it comes to identifying users to platforms like Crisp:

HTML Header

Place the code snippet in the HTML header of the page where a user lands after authentication. You can use Dynamic Data to replace the fields Crisp exposes, such as email. This approach may be simple but it can get redundant rather quick as you won’t need to keep setting this field once it’s been set.

JavaScript Action

Take advantage of any of the Bubble plugins that support running JavaScript as an action, such as Components. Place the code snippet in the JavaScript action with your Dynamic Data. Once a user creates an account on your platform, run the JavaScript action to pass the data to Crisp.

Psst…we’ve had Crisp powering our chat for almost a year. :wink:

4 Likes

You could use $crisp.get("user:email"); to check if the email of a Crisp user has been set, as Crisp does expose an API. Alternatively, you could know this to be true when you first create an account for your users. :slightly_smiling_face:

1 Like

Got it. Thanks!

These are your available actions using simple client side namespace $crisp

 […]
    0: "$crisp.do('chat:open')"
    1: "$crisp.do('chat:close')"
    2: "$crisp.do('chat:toggle')"
    3: "$crisp.do('chat:show')"
    4: "$crisp.do('chat:hide')"
    5: "$crisp.do('message:send')"
    6: "$crisp.do('message:show')"
    7: "$crisp.do('message:read')"
    8: "$crisp.do('session:reset')"
    9: "$crisp.do('trigger:run')"
    10: "$crisp.is('chat:opened')"
    11: "$crisp.is('chat:closed')"
    12: "$crisp.is('chat:visible')"
    13: "$crisp.is('chat:hidden')"
    14: "$crisp.is('chat:small')"
    15: "$crisp.is('chat:large')"
    16: "$crisp.is('session:ongoing')"
    17: "$crisp.is('website:available')"
    18: "$crisp.get('chat:unread:count')"
    19: "$crisp.get('message:text')"
    20: "$crisp.get('session:identifier')"
    21: "$crisp.get('session:data')"
    22: "$crisp.get('user:email')"
    23: "$crisp.get('user:phone')"
    24: "$crisp.get('user:nickname')"
    25: "$crisp.get('user:avatar')"
    26: "$crisp.set('message:text')"
    27: "$crisp.set('session:data')"
    28: "$crisp.set('session:segments')"
    29: "$crisp.set('session:event')"
    30: "$crisp.set('user:email')"
    31: "$crisp.set('user:phone')"
    32: "$crisp.set('user:nickname')"
    33: "$crisp.set('user:avatar')"
    34: "$crisp.config('availability:tooltip')"
    35: "$crisp.config('hide:on:away')"
    36: "$crisp.config('hide:on:mobile')"
    37: "$crisp.config('position:reverse')"
    38: "$crisp.on('session:loaded')"
    39: "$crisp.on('chat:initiated')"
    40: "$crisp.on('chat:opened')"
    41: "$crisp.on('chat:closed')"
    42: "$crisp.on('message:sent')"
    43: "$crisp.on('message:received')"
    44: "$crisp.on('message:compose:sent')"
    45: "$crisp.on('message:compose:received')"
    46: "$crisp.on('user:email:changed')"
    47: "$crisp.on('user:phone:changed')"
    48: "$crisp.on('user:nickname:changed')"
    49: "$crisp.on('user:avatar:changed')"
    50: "$crisp.on('website:availability:changed')"
    51: "$crisp.off('session:loaded')"
    52: "$crisp.off('chat:initiated')"
    53: "$crisp.off('chat:opened')"
    54: "$crisp.off('chat:closed')"
    55: "$crisp.off('message:sent')"
    56: "$crisp.off('message:received')"
    57: "$crisp.off('message:compose:sent')"
    58: "$crisp.off('message:compose:received')"
    59: "$crisp.off('user:email:changed')"
    60: "$crisp.off('user:phone:changed')"
    61: "$crisp.off('user:nickname:changed')"
    62: "$crisp.off('user:avatar:changed')"
    63: "$crisp.off('website:availability:changed')"

just had a play with the element on the site… its pretty cool. here is the way to go,

as i said on page load run the block, but run this:

To set users email:

var email = CurrentUser'sEmail; 
$crisp.push(["set", "user:email", [email]]);

i think its worth a mention too, if you dont want the element to be able to trow any errors at your users you can run:

$crisp.safe();

in a code block, as long as its run before any other code.

2 Likes

This topic was automatically closed after 70 days. New replies are no longer allowed.