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?

您未登录。 登录 发布回答。

一个好的回答可以清楚地解答问题和提供建设性反馈,并能促进提问者的职业发展。

回答问题的准则