Enabling authenticated visitors in the integrated Web Widget

Have more questions? Submit a request

25 Comments

  • Josh Cope

    Hi, any idea if your using this would you also still want to use zE.identify https://developer.zendesk.com/embeddables/docs/widget/api#ze.identify

    or would this cover that now?

    also it seems like setPhone would still be set using the zopim livechat api? as this is only doing name and email https://api.zopim.com/files/meshim/widget/controllers/LiveChatAPI-js.html#setPhone

    also I submitted a request for the Web Widget Integrated Chat Experience EAP and was wondering if I could get access

    Thanks

    0
  • Ramin Shokrizadeh

    Hi Josh,

    You would still want to use zE.identify for the other channels in the Web Widget, like contact form/help center. If you only care about setting the information for the Chat product, you can just use this.

    Currently, authenticated visitors does not require phone number as a authenticated field and you would need to set it using setPhone for now.

    For the Web Widget integrated chat experience EAP, the PM (Dan) should get in touch with you shortly.

    Thanks,

    Ramin

    0
  • Zac

    Quick question - what happens if you try to authenticate a visitor who has some kind of credential on your website but doesn't yet exist in your Zendesk?

    0
  • Ramin Shokrizadeh

    Hey Zac,

    Using chat authentication with the Web Widget won't create a new user until a ticket gets created from the chat/offline message. This behaviour is the same for non-authenticated visitors also.

    If you use zE.identify to authenticate the non-Chat related channels in the Web Widget, it will create a new user if there isn't one that matched the email address in your account.

    You can learn more about this Web Widget API here:

    https://developer.zendesk.com/embeddables/docs/widget/api#ze.identify

    -Ramin 

    0
  • Jonathan Fornari

    Hello, I followed this article's tutorial as stated, but my function jwtFn never gets called or executed. I'm also passing other stuff on settings like colour change just to make sure it is right, and the colors indeed changed on the widget.

    Any help?

    2
  • Ramin Shokrizadeh

    Hi Jonathan,

    Can you email the issue you are experiencing with the code snippet using the Javascript APIs to chat@zendesk.com?

    We can have a look and see what could be causing the issue.

    Cheers,

    Ramin

    0
  • Aman Kumar Jain

    Hi,

    The jwtFn is never executed. Screenshot below:

     

    This is a blocker, any help?

     
    0
  • Steve Shutts (Admin)

    I have zero experience with website coding and java scripts. When will this be an automatic part of chat? When a user logs into the helpcenter and has the chat widget available, they should automatically be logged into the widget. currently, we are having to ask them to log in yet again, even though they just did. seems counter intuitive. The chat widget should just carry over the user's name and email from the helpcents interface.

    Thanks,

    Steve

    0
  • Ramin Shokrizadeh

    Hi Steve,

    Today, the name and email information are pre-filled for customers who are logged into help center but they are not authenticated.

    Authenticating visitors for now will require additional code and you will need to get assistance or a contractor to help you with that work.

    -Ramin

    0
  • Brian Duerring

    Quick note to hopefully save users time and frustration:

    The fetch method defined in this article (see below), does not work with Safari. 

     fetch('JWT_TOKEN_ENDPOINT').then(function(res) {

    When utilized, it returns the following error int he console:
    The operation couldn’t be completed. (kCFErrorDomainCFNetwork error 303.)

    Our endpoint was returning http code 200 with the JWT as plain text and worked fine with Chrome, Firefox and IE.  

    We were able to resolve by replacing the fetch statement with getJSON and updating our endpoint to output JSON with an array (in our case sucess (boolen) and jwt (string).  This resolved the issue on Safari and works with every other browser we've tested as well.  

    Here's the updated code:

    window.zESettings = {
    webWidget: {
    authenticate: {
    chat: {
    jwtFn: function(callback) {
    $.getJSON('JWT_TOKEN_ENDPOINT', function (data) {
    if( data.success ){
    callback(data.jwt);
    }
    });
    }
    }
    }
    }
    };
    0
  • Aman Kumar Jain

    Hi Ramin and Brain,

    We still have a problem. "fetch" will be executed only when jwtFn is executed. In our case even jwtFn is not being executed.

    1
  • Jun Yi Hee

    Hi Brian and Aman,

    Brian:

    I am not sure why you are having issues with Safari specifically, but it looks like the JWT_TOKEN_ENDPOINT in your code is expected to return a JSON payload.

    In that case, you can still use fetch by replacing res.text() with res.json() in the example code above.

    fetch('JWT_TOKEN_ENDPOINT').then(function(res) {
    res.json().then(function(data) {
    if (data.success) callback(data.jwt);
    });
    });

     

    Aman: I have replied to you separately in an email.

    Thank you,

    Jun Yi

    0
  • Brian Duerring

    Jun Yi,


    Thanks for the heads-up regarding the res.json() option to set the handler for a JSON payload.  Unfortunately, Safari failed with the res.text() option when the endpoint was returning plain-text.  Only the move to AJAX utilizing getJson() resolved the issue on Safari.  For reference the version of Safari is below if you would like to confirm / replicate.

    0
  • Hayya Husna

    Hi Ramin, 

    This is Hayya again,

    I have added this code but it's still not working, the jwtFn is never executed.

     

    1
  • Jeffrey van der Meer

    We have the same problem as Hayya. The jwtFn function is never executed. How to proceed?

    0
  • Ramin Shokrizadeh

    @Hayya @Jeffrey you need to be part of the integrated Chat experience EAP for the code to work. It is currently not turned on for your accounts.

    Please register for the EAP here: https://support.zendesk.com/hc/en-us/articles/360001015607-Announcing-Web-Widget-Integrated-Chat-Experience-EAP

     

    0
  • Jorge Lage Saguier

    We have the same problem as Hayya & Jeffrey and we do have the EAP activated.

    0
  • Ramin Shokrizadeh

    Hi Jorge,

    Sorry to hear that you are having trouble implementing this. Can you please chat@zendesk.com with your account information, URL where the widget is embedded and the code on your page?

    We can then look and see if anything stands out.

    -Ramin

     

    0
  • panbin

    We are using Web SDK implement our chat widget. does visitor authenticate need "EAP" ? we implement as this article instruction, but it can't work.

    0
  • Ramin Shokrizadeh

    Hi panbin,

    Since you are using the Web SDK, you will need to follow the instructions here: https://api.zopim.com/web-sdk/#visitor-authentication

    No need to be part of the EAP.

    -Ramin

     

    0
  • Rob Meyers

    Hello, we're getting a "Zendesk Chat: failed to verify token: jwt verification error" notification.

    We're using code similar to:
    $zopim.livechat.authenticate({
              jwtFn: function (callback) {
                fetch('http://localhost/security/api/security/login', { credentials: 'include' }).then(function (res) {
                  res.text().then(function (jwt) {
                    console.log(jwt);
                    callback(jwt);
                  });
                });
              }
            });

    Can anyone assist? Thank you.

    2
  • Ramin Shokrizadeh

    Hi Rob, 

    Can you create a ticket for this issue by sending an email to chat@zendesk.com? The team can look at why it isn't working for you. 

    -Ramin

     

    0
  • Rob Meyers

    Hi Ramin, 

    I did so yesterday :)

     

    Thanks!

    0
  • Nikola

    I've followed all steps and managed to generate JWT key on my backend(PHP). I've copy-pasted code and installed Firebase\JWT. It generated token that I've managed to send when i init  chat on my client side:

    ```

    webWidget: {
    authenticate: {
    chat: {
    jwtFn: callback => {
    fetch(`${environment.apiUrl}/authenticate-zendesk`).then(function(res) {
    res.text().then(function(jwt) {
    console.log('called');
    callback(jwt);
    });
    });
    }
    }
    }
    }
    ```

    it console.logs that it failed to verify token.

    `Zendesk Chat Web SDK: Error: init: Failed to verify token: jwt verification error`

    Any idea what may cause this problem?

    0
  • Ramin Shokrizadeh

    Hey Nikola,

    I will create a ticket for you and we can troubleshoot the issue on the ticket.

    Thanks,
    Ramin

    0

Please sign in to leave a comment.

Powered by Zendesk