Quickstart – Creating a launcher for the Web Widget

Have more questions? Submit a request

4 Comments

  • Tetiana Kharchenko
    Comment actions Permalink

    Thank you so much for this article! We had a hard time customizing the launcher and failed, but this really helped!

    0
  • Wesley Bowles
    Comment actions Permalink

    Darren Chan thank you, this helped a lot however am noticing some unintended behaviour. 

    We've followed these instructions and got our Custom launcher working as expected but we have one issue where proactive notifications or agents initiating chats on their end aren't allowing the widget to open itself. 

    If we don't use the custom launcher, the widget will automatically open on the user's screen without requiring the user to open the widget manually. However with our custom launcher, built exactly as above, the user has to manually open the widget to see any notifications or proactive messages. Are we missing something?

    0
  • Bryan - Community Manager
    Comment actions Permalink

    Hi Wesley. I'll let Darren offer input as well, but this is definitely a tutorial — specific needs may vary. This is just to demonstrate some of the basic features that are available.

    That said, you can add code that considers different events. For example, this code is triggered when a chat message comes in:

    zE('webWidget:on', 'chat:unreadMessages', (number) => {
      console.log(`You have ${number} unread messages`);
    })

    You could use the above and then call:

    zE('webWidget:on', 'open', function() {
    console.log('The widget has been opened!')
    })

    Your needs may of course be different. The above are just ideas. Hope they help!

    0
  • Danish Kamal
    Comment actions Permalink

    Just wanted to share if we want to a Custom Button to as a toggle button we can just do it by attaching onClose and onOpen to zE and just use the toggle command from the button.

    Global Script

    window.zE('webWidget', 'hide');
    window.zE('webWidget:on', 'close', function () {
    window.zE('webWidget', 'hide');
    });
    window.zE('webWidget:on', 'open', function () {
    window.zE('webWidget', 'show');
    });

     

    Button OnClick

    window.zE('webWidget', 'toggle');
    0

Please sign in to leave a comment.

Powered by Zendesk