Customer Portal

Get Involved. Join the Conversation.

Topic

    Diane Kohnert
    Chat Inlay Load Event
    Topic posted June 26, 2019 by Diane KohnertBlue Ribbon: 750+ Points 
    89 Views, 8 Comments
    Title:
    Chat Inlay Load Event
    Summary:
    Need example of subscribing to the Chat Inlay Load event
    Content:

    Hi,

    I am trying to subscribe to the Chat Inlay Load event, I see there is an event published but if anyone has an example that would be helpful.

    Thanks!

    Diane

    inlay-oracle-chat-embedded

     

     

    Publish

    inlay-oracle-chat-embedded-loaded
    Version:
    19B

    Comment

     

    • Robert Surujbhan

      Hi Diane - here is an example of subscribing to that event (JS code you would add to the page containing the Inlay):

      document.addEventListener('inlay-oracle-chat-embedded-loaded', function(e) {
          console.log('the inlay has loaded!');
      });
      
    • Willie Eide

      That the load event for the chat inlay which is simply fired when the event is loaded onto the page. There is a new published event that will show a hidden embedded chat inlay. If you go to the registry page for the embedded chat and under "Events" you can see that event name.

    • Zheng Lai

      I need to trigger the event to show the hidden embedded chat inlay (minimized if possible) when the Conditional Chat Link (CCL) Inlay has loaded. The event name is "inlay-oracle-chat-embedded-show" and I have my script on the same page after the elements as follows:

      ```Javascript

      document.addEventListener('inlay-oracle-chat-ccl-loaded', function() {
          const elem = document.getElementById('chatInlay');
          elem.dispatchEvent(new CustomEvent('inlay-oracle-chat-embedded-show'));
          console.log(`Event fired`);
      });

      ```

      The inlay-oracle-chat-ccl-loaded fires as expected when the CCL inlay loads, however, firing the "inlay-oracle-chat-embedded-show" event on the hidden embedded chat inlay element doesn't show it. Would anyone know how I can properly fire the event to show the hidden embedded chat inlay element (minimized)?

      • Willie Eide

        I am assuming that you have the chat-embedded inlay with the attribute inlay-hidden="true"

        One thing to look at is the developer console. We try to put information in there in the event something doesn't load properly. It would give you some clues as to what was the issue.
        I was trying to do the same thing yesterday and had issues so I looked into the code. We noticed that the CustomEvent needed a detail and thus gave it one. We will make the change to not require this field but in the meantime you can do this (I made this a function, but you get the idea)

        var fireChatInlayShowEvent = function() {
          window.oit.fire(new oit.CustomEvent('inlay-oracle-chat-embedded-show', { detail: { id: 'chatInlay' } }));
        

         

        • Zheng Lai

          Hi Willie, thanks for responding so quickly, your assumption is correct. I had checked my chrome console before and there were no errors, but that was probably because I was firing the event on the wrong element. I'm not sure where I could have learnt about firing the events on the window.oit object, is there some sort of developer forum or resource to look at besides the documentation on /oit/latest/?

          Anyway, I called the function you provided inside the event handler for the CCL inlay load event listener and it works! However, I had to wrap the function in a setTimeOut as the Embedded Chat Inlay has to be configured fully by the loader.js external script before the 'inlay-oracle-chat-embedded-show' fires, otherwise, nothing happens. This is not ideal as there is still a chance that the Embedded Chat Inlay configuration takes longer than my setTimeOut delay (I'm open to suggestions on how to improve this).

          Now I have a new issue, when the 'inlay-oracle-chat-embedded-show' fires, the inlay displays fully maximized (with the form fields) on the bottom right. However, I need the inlay to display minimized as the OOTB button. My end goal is to only show the OOTB chat button as an option for customers to click on whenever agents are available, which would then maximize the inlay and show the form fields. I previously tried to toggle the inlay-hidden="true" attribute on the embedded chat inlay instead of firing the show event, however, there seem to be other attributes that need to be changed for the inlay to display properly. I'm thinking of firing a "minimize" event on the embedded chat inlay before displaying it, but I have no idea if such an event exists. What do you think?

          • Willie Eide

            2 answers here:

            1) Here is my full response to your need
             

            <inlay-oracle-chat-embedded class="inlay" id="chatInlay" site-url="mysite.widget.abc.lan" inlay-hidden="true"></inlay-oracle-chat-embedded>
            
            <script>
            
            var showChatInlay = function() {
              (window.oit && window.oit.inlayIsLoaded)
                ? waitForChatInlay()
                : document.addEventListener('oit-loaded', waitForChatInlay);
            }
            var waitForChatInlay = function() {
              (window.oit.inlayIsLoaded('chatInlay'))
                ? fireChatInlayShowEvent()
                : document.addEventListener('inlay-oracle-chat-embedded-loaded', fireChatInlayShowEvent);
            }
            var fireChatInlayShowEvent = function() {
              window.oit.fire(new oit.CustomEvent('inlay-oracle-chat-embedded-show', { detail: { id: 'chatInlay' } }));
            }
            setTimeout(showChatInlay, 0);
            
            </script>
            

            That way, you can check to see if the inlays are loaded before trying to show it. 
            As for the "window.oit.fire" we only do that becasue IE is quirky and we need to do the fire()

            2) I see what you are trying to do. For now, you may want to run a click event on the chat-embedded to minimize it. I hesitate to add this as a new feature because what we really want to do is to add polling to the chat-embedded inlay and thus actually do what you want instead of all of this custom code. That ticket is currently on my board. I don't know if we will get to it before the holidays because there are only 2 more planned deployments before our "holiday freeze" and the last deployment will be around Nov 12th. 

            • Zheng Lai

              Thanks so much for your detailed response. Your suggestion, including running the click event on the minimize button, does the trick for showing the Embedded Chat Inlay properly. However, I realized that my initial understanding of the 'inlay-oracle-chat-ccl-loaded'  event is wrong which means that my conditional logic doesn't actually work.

              I thought that this event only fires when there are available agents. However, I've discovered that this event always fires once the Conditional Chat Link loads in the background, even if it's not displayed. This means that if no agents were available, the event would still fire, which subsequently fires the 'inlay-oracle-chat-embedded-show' event to display the Embedded Chat Widget.

              Another person told me to create this conditional logic by listening to the poll responses from the CCL inlay polling. I can see the response body of each response in the Chrome network tab:{"queueId":1,"queueIdString":"1","expectedWaitSeconds":0,"expectedWaitSecondsString":"0","availableAgentSessions":0,"totalAvailableAgents":0...}

              But I have no idea how to go about listening for the poll responses to query the "availableAgentSessions" property before firing the 'inlay-oracle-chat-embedded-show' event. Do you know if this is possible?

              Note: I will be putting this chat inlay on an external website, so I won't be able to use the <rn:condition> page tags to create this conditional logic.