Enabling authenticated visitors in the integrated Web Widget

Have more questions? Submit a request

49 Comments

  • Josh Cope
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    Hi,

    The jwtFn is never executed. Screenshot below:

     

    This is a blocker, any help?

     
    0
  • Steve Shutts
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

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

    0
  • Ramin Shokrizadeh
    Comment actions Permalink

    @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
    Comment actions Permalink

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

    0
  • Ramin Shokrizadeh
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    Hi Ramin, 

    I did so yesterday :)

     

    Thanks!

    0
  • Nikola
    Comment actions Permalink

    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?

    1
  • Ramin Shokrizadeh
    Comment actions Permalink

    Hey Nikola,

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

    Thanks,
    Ramin

    0
  • Tiago F. Marques
    Comment actions Permalink

    Hello, I'm getting the exact same error as NIKOLA

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

    Can you assist me?

    Best regards

     

    0
  • Ramin Shokrizadeh
    Comment actions Permalink

    Hi Tiago,

    Can you email the following information to chat@zendesk.com so we can troubleshoot the issue further:

    - Code being used to authenticate the visitor

    - Page where the widget and authentication is on

    - HAR file if possible. If you dont know how to generate this, please follow the instructions here: https://support.zendesk.com/hc/en-us/articles/204410413-Generating-a-HAR-file-for-troubleshooting

    -Ramin

    0
  • Bliss
    Comment actions Permalink

    You need to add the following header to your JWT to get it working.

    { "header": { "alg": 'HS256',"cty":"JWT"}}
     
    that was for my NodeJS using https://github.com/auth0/node-jsonwebtoken
    The document didn't state the header
     
    My payload was 
    {
    "name": "Name Surname",
    "email": "aasdfds@gmail.com",
    "iat": 1547699318,
    "external_id": "aassdasDASDd",
    "phone": 5417541343
    }
     
    0
  • Dylan Cunniffe
    Comment actions Permalink

    Hey Team,

    Any ETA on the ability to log out the user from the widget when logging out of the host app? We really want to authenticate customers but the lack of this feature is too big a security risk for us at the moment to allow us to implement.

    0
  • Ramin Shokrizadeh
    Comment actions Permalink

    Hi Dylan,

    If you are using the Web Widget, you can use the following:

    <script type="text/javascript"> zE(function() { zE('webWidget', 'logout'); }); </script>

    If you are using the Chat standalone widget, you can use the following:

    https://api.zopim.com/files/meshim/widget/controllers/LiveChatAPI-js.html#clearAll

    If you are using the Web SDK, you can use the following:

    https://api.zopim.com/web-sdk/#zchat-logout

    Thanks,

    Ramin

    0

Please sign in to leave a comment.

Powered by Zendesk