Amazon connect chat widget script

0

I'm using amazon connect widget script with custom button, when user click on the custom button(Chat with US), we open an custom form where we ask for there name and email id, and when they submit the form we initialise, we send name and email as attribute so agents can directly access it. So the problem we are facing is when user click on the "Chat with US" button we hide this button and start the chat but when chat ends we want to show this button again. but I don't know how to get chat state. I'm using javascript and PHP. below is the widget code example. please help me if you can. Thank you.

startchat.addEventListener('submit', function(event){
    event.preventDefault(); 
    // Example: Log all form data entries
    var form_name =requestData.get('name');
    var email =requestData.get('email');
    var phone =requestData.get('phone');
    var location =requestData.get('location_name');
    var location_id =requestData.get('location_id');

    // Data to be sent to the PHP page
    const sendData = {
        form_name: form_name,
        email: email,
        phone: phone,
        location: location,
        location_id: location_id
    };
    



    (function(w, d, x, id){
    s=d.createElement('script');
    s.src='https://dend6g4sigg57.cloudfront.net/amazon-connect-chat-interface-client.js';
    s.async=1;
    s.id=id;
    d.getElementsByTagName('head')[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', '');
  amazon_connect('styles', { iconType: 'CHAT', openChat: { color: '#ffffff', backgroundColor: '#123456' }, closeChat: { color: '#ffffff', backgroundColor: '#123456'} });
  // Open chat automatically
  
  amazon_connect('authenticate', function(callback) {
    
    window.fetch('getting token', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(sendData) // Convert the data to JSON string
    }).then(res => {
      res.json().then(data => {
        callback(data);
      });
    });
  });
  amazon_connect('customerDisplayName', function(callback) {
    const displayName = form_name; //fetch this name dynamically
    callback(displayName);
  });

  amazon_connect('snippetId', 'my snippetId');
  amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown', 'application/vnd.amazonaws.connect.message.interactive', 'application/vnd.amazonaws.connect.message.interactive.response' ]);
  amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true,
        alwaysHideWidgetButton: true,
        
    });
});
Tandan
已提問 2 個月前檢視次數 439 次
1 個回答
0

Hi Tandan,

Add an unload event to your customLaunchBehavior.

amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true,
        alwaysHideWidgetButton: true,
        programaticLaunch: (function(launchCallback) {
          var launchWidgetBtn = document.getElementById('launch-widget-btn');
console.log('got the launch button', launchWidgetBtn)
          if (launchWidgetBtn) {
            launchWidgetBtn.addEventListener('click', launchCallback);
            window.onunload = function() {
              launchWidgetBtn.removeEventListener('click', launchCallback);
            }
          }
        })
      });

Thanks Dan

DanB
已回答 2 個月前
  • Hello Dan Thankk you for your answer, but the window.unload does not work when the chat ends, it only works when I refresh the page. what Am I missing?

您尚未登入。 登入 去張貼答案。

一個好的回答可以清楚地回答問題並提供建設性的意見回饋,同時有助於提問者的專業成長。

回答問題指南