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
질문됨 한 달 전436회 조회
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
답변함 한 달 전
  • 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?

로그인하지 않았습니다. 로그인해야 답변을 게시할 수 있습니다.

좋은 답변은 질문에 명확하게 답하고 건설적인 피드백을 제공하며 질문자의 전문적인 성장을 장려합니다.

질문 답변하기에 대한 가이드라인

관련 콘텐츠