Passing through logged in member email to identify user in chat widget

[Brian_DV1G]

I am looking to integrate Crisp chat with my Ghost blog. I am looking to embed my chat widget into member’s only help/welcome/contact pages.

How can I pass through the logged-in member’s email to Crisp chat so that when someone opens a conversation inside the widget, I will already have their user info as well as saved history of all previous conversations.

I am not code savvy but I have successfully done this integration in Softr.io in the past here’s what original thread looks like; https://community.softr.io/t/how-to-pass-user-authentication-to-crisp-using-the-softr-auth/511

Here is what the code snippet looks like;

<script>
if(window.logged_in_user && window.logged_in_user['softr_user_email']) {
$crisp.push(["set", "user:email", window.logged_in_user['softr_user_email']]);
}
</script>

I am thinking it’s possible to do the same using Ghost member attributes but I wouldn’t know how to script it.

Here is some more documentation from Crisp chat; https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/dollar-crisp/

I appreciate your time and help with this as it is a game changer for me but is also a replicable solution/idea others can copy & paste.

[Brian_DV1G]

Following documentation to the best of my ability, I get;

<script>
$crisp.push(["set", "user:email", [{{@member.email}}]])
</script>

Shown here, Crisp automatically recognizes an input but says the value it received isn’t an email address. Citing “Mistyped” error.

[Kevin]

I think you likely need to put quotes around the email, does this work?

$crisp.push(["set", "user:email", ["{{@member.email}}"]])

[Brian_DV1G]

Thank you @Kevin for amending my script. I spoke with Chris from Crisp Chat customer support and it appears the issue may be a bit more complex for my handling. The following are screenshots are his responses to trouble-shooting the script;

Can anyone make sense of a solution given this new context?

[Kevin]

The {{@member.email}} variable doesn’t exist client-side, it is replaced on the server so it ends up being a literal value like member@gmail.com in the rendered HTML.

That’s why I said to use something like this:

$crisp.push(["set", "user:email", ["{{@member.email}}"]])

So that you have valid JS generated in your HTML, the above would output this:

$crisp.push(["set", "user:email", ["member@gmail.com"]])

If that’s not working you’ll need to find out from Crisp what needs to be rendered in your HTML for the script to work.

Note that you can only use {{@member.email}} in one of your .hbs template files, it won’t work inside of a script file.

[hsarji]

I know that Ghost saves a logged-in user’s email in a cookie. Last time I checked, I couldn’t use the cookie because my other app was on a different domain and different server, which brought up cross-origin resource sharing (CORS) problems.

[CHACKK]

Hi,

did you manage to get this working? I’m trying to do something similar!

Thanks!

[Cathy_Sarisky]

@hsarji

saves a logged-in user’s email in a cookie

That seems to have changed recently. But your ghost site (NOT the code injection, but the .hbs file) has access to the user’s email as Kevin said above.

@CHACKK

did you manage to get this working? I’m trying to do something similar!

It’s very possible to get access to a member’s email address, and to feed that into javascript. The big thing to understand is that Ghost will substitute in values in handlebars, and then the browser will run the javascript.

So… if we write this in handlebars:

<script>
   let name = "{{@member.name}}";
   alert(`Hello, ${name}`);
</script>

First, the Ghost server converts that to:

<script>
   let name = "Cathy";
   alert(`Hello, ${name}`);
</script>

And then the browser reads that script and pops an alert that says “Hello, Cathy”

So, there’s no reason not to be able to pass the member’s email into the chatbot, and if it wasn’t working for the OP, they may need to 1) check the source of the page (ctrl-U in the browser) to make sure they’re getting what they expected and 2) check the documentation for the chatbot.

Is this a secure way to get the user’s email? No. You’re trusting the browser, and that’s always a mistake. Is it adequate for a chatbot? Maybe.

To securely get the user’s email:
– run some javascript in the browser: Send the contents of the Ghost cookies (ghost-ssr and ghost-ssr.sig) to a server/cloud function somewhere
– have the server/cloud function get the user’s identity (including email, tiers, etc etc) by making a request that contains the cookies to the Ghost site’s /members/api/member endpoint.
– have the server/cloud function do whatever it was you wanted to do.

Alternatively:
– have the browser make a request to /members/api/session, to get the member’s jwt.
– Send the jwt wherever the browser is making a request. Have that server validate the jwt using /members/.well-known/jwks.json