KixPanganiban · April 5, 2022 13:39
diff --git a/fiddle.html b/fiddle.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom handoff from Ada to LivePerson Proof of Concept</title>
  <style>
    /* Hide the buttons by default and display when needed */
    .show-button {
      display: block !important;
    }
    #ada-button-frame {
      display: none;
    }
    .hide-button {
      display: none !important;
    }
  </style>

  <!-- Replace this line with your LivePerson Monitor Web Tag code snippet -->

 </head>
 <body>
  <h1>Proof of concept: Custom handoff from Ada to LivePerson Live Chat</h1>
  <p>This proof of concept code sample is for a monitored LivePerson Live Chat engagement.</p>
  <p>Remember to update your Ada bot handle and add your live chat platform's embed script before testing.</p>

  <!-- The following sample scripts should be placed just before the closing body tag or started after the main live chat elements are available. -->
  <script>
    const liveChatId = 0000000000; // Replace the number value with your Live Chat engagementId
    const liveChatButtonSelector = '.LPMcontainer.LPMoverlay';
    let liveChatStarted = false;
    let liveChatEnded = false;
    let adaButton;

    function setLastChatOpened(name) {
      sessionStorage.setItem("lastChatOpened", name);
    }

    function checkLastChatOpened() {
      const lastChatOpened = sessionStorage.getItem("lastChatOpened");

      if (lastChatOpened !== "liveChat") {
        adaButton.classList.add("show-button");
      }
    }
    
    function hideAda() {
      adaEmbed.getInfo().then(function (info) {
        if (info.isChatOpen) {
          adaEmbed.toggle();
          adaButton.classList.remove("show-button");
        }
      });
    }

    function displayAda() {
      adaEmbed.getInfo().then(function (info) {
        if (!info.isChatOpen) {
          adaButton.classList.add("show-button");
          setLastChatOpened("ada");
        }
      });
    }

    function hideLiveChatButton(data, eventInfo) {
      if (!liveChatStarted || liveChatEnded) {
        const liveChatButton = document.querySelector(liveChatButtonSelector);
        liveChatButton.classList.add("hide-button");
        displayAda();
      }
    }
    
    function handleLiveChatState(data, eventInfo) {
      const liveChatState = data.state;
      if (liveChatState === "ended" || liveChatState === "postChat" || liveChatState === "applicationEnded") {
        liveChatEnded = true;
      }
    }

    /* Optional utility function to get the last few chatbot messages if the transcript character count is over a certain threshold.
     * You may want to leverage this if the Ada chat transcript will be sent to the live chat platform.
     */
    function formatMessage(msg, charLimit, sliceStart) {
      const msgArray = msg.split(/(?=SUMMARY: |USER: |BOT: )/);

      // If the chat transcript setting is reversed in the builder Dashboard (i.e. sorted from newest to oldest), the slice() params may need to be updated.
      if (msg.length >= charLimit) {
        return `LAST FEW CHATBOT INTERACTIONS:\n\n${msgArray.slice(sliceStart).join("")}`;
      }

      return msg;
    }
    
    function startLiveChat(handoffParams) {
      hideAda();

      // Display live chat elements, and pass Ada handoff params
      lpTag.taglets.rendererStub.click(liveChatId, {
        preChatLines: [ handoffParams.transcript ],
      });
      liveChatStarted = true;
      setLastChatOpened("liveChat");

      const userInfo = {
        "type": "personal",
        "personal": {
          "firstname": handoffParams.firstName,
          "contacts": [{
            "email": handoffParams.email,
          }],
        },
      };
      lpTag.sdes.send(userInfo);
    }
    
    // Listen for live chat window events
    lpTag.events.bind("LP_OFFERS", "OFFER_DISPLAY", hideLiveChatButton);
    lpTag.events.bind("lpUnifiedWindow", "state", handleLiveChatState);

    window.adaSettings = {
      adaReadyCallback: () => {
        adaButton = document.querySelector("#ada-button-frame");
        checkLastChatOpened();
      },
      eventCallbacks: {
        custom_handoff: (event) => {     
          const handoffParams = {
            firstName: event.user_data.global.first_name,
            email: event.user_data.global.email,
  
            // Ada chat transcripts are available for download for a certain number of days. Confirm the number of days with your Ada account team.
            transcript: `https://custom-handoff-demo.ada.support/api/chatters/${event.user_data.all_data.chatter_token}/transcript/txt/`,
  
            // The following line is an alternative way to get part of the Ada transcript.
            // transcript: formatMessage(event.chatter_transcript, 1000, -6),
          }       
          
          startLiveChat(handoffParams);
        },
      },
    };
  </script>
  
  <script
    id="__ada"
    data-handle="ada-example"
    src="https://static.ada.support/embed2.js"
  ></script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Custom handoff from Ada to LivePerson Proof of Concept</title>
	<style>
	/* Hide the buttons by default and display when needed */
	.show-button {
	display: block !important;
	}
	#ada-button-frame {
	display: none;
	}
	.hide-button {
	display: none !important;
	}
	</style>

	<!-- Replace this line with your LivePerson Monitor Web Tag code snippet -->

	</head>
	<body>
	<h1>Proof of concept: Custom handoff from Ada to LivePerson Live Chat</h1>
	<p>This proof of concept code sample is for a monitored LivePerson Live Chat engagement.</p>
	<p>Remember to update your Ada bot handle and add your live chat platform's embed script before testing.</p>

	<!-- The following sample scripts should be placed just before the closing body tag or started after the main live chat elements are available. -->
	<script>
	const liveChatId = 0000000000; // Replace the number value with your Live Chat engagementId
	const liveChatButtonSelector = '.LPMcontainer.LPMoverlay';
	let liveChatStarted = false;
	let liveChatEnded = false;
	let adaButton;

	function setLastChatOpened(name) {
	sessionStorage.setItem("lastChatOpened", name);
	}

	function checkLastChatOpened() {
	const lastChatOpened = sessionStorage.getItem("lastChatOpened");

	if (lastChatOpened !== "liveChat") {
	adaButton.classList.add("show-button");
	}
	}

	function hideAda() {
	adaEmbed.getInfo().then(function (info) {
	if (info.isChatOpen) {
	adaEmbed.toggle();
	adaButton.classList.remove("show-button");
	}
	});
	}

	function displayAda() {
	adaEmbed.getInfo().then(function (info) {
	if (!info.isChatOpen) {
	adaButton.classList.add("show-button");
	setLastChatOpened("ada");
	}
	});
	}

	function hideLiveChatButton(data, eventInfo) {
	if (!liveChatStarted \|\| liveChatEnded) {
	const liveChatButton = document.querySelector(liveChatButtonSelector);
	liveChatButton.classList.add("hide-button");
	displayAda();
	}
	}

	function handleLiveChatState(data, eventInfo) {
	const liveChatState = data.state;
	if (liveChatState === "ended" \|\| liveChatState === "postChat" \|\| liveChatState === "applicationEnded") {
	liveChatEnded = true;
	}
	}

	/* Optional utility function to get the last few chatbot messages if the transcript character count is over a certain threshold.
	* You may want to leverage this if the Ada chat transcript will be sent to the live chat platform.
	*/
	function formatMessage(msg, charLimit, sliceStart) {
	const msgArray = msg.split(/(?=SUMMARY: \|USER: \|BOT: )/);

	// If the chat transcript setting is reversed in the builder Dashboard (i.e. sorted from newest to oldest), the slice() params may need to be updated.
	if (msg.length >= charLimit) {
	return `LAST FEW CHATBOT INTERACTIONS:\n\n${msgArray.slice(sliceStart).join("")}`;
	}

	return msg;
	}

	function startLiveChat(handoffParams) {
	hideAda();

	// Display live chat elements, and pass Ada handoff params
	lpTag.taglets.rendererStub.click(liveChatId, {
	preChatLines: [ handoffParams.transcript ],
	});
	liveChatStarted = true;
	setLastChatOpened("liveChat");

	const userInfo = {
	"type": "personal",
	"personal": {
	"firstname": handoffParams.firstName,
	"contacts": [{
	"email": handoffParams.email,
	}],
	},
	};
	lpTag.sdes.send(userInfo);
	}

	// Listen for live chat window events
	lpTag.events.bind("LP_OFFERS", "OFFER_DISPLAY", hideLiveChatButton);
	lpTag.events.bind("lpUnifiedWindow", "state", handleLiveChatState);

	window.adaSettings = {
	adaReadyCallback: () => {
	adaButton = document.querySelector("#ada-button-frame");
	checkLastChatOpened();
	},
	eventCallbacks: {
	custom_handoff: (event) => {
	const handoffParams = {
	firstName: event.user_data.global.first_name,
	email: event.user_data.global.email,

	// Ada chat transcripts are available for download for a certain number of days. Confirm the number of days with your Ada account team.
	transcript: `https://custom-handoff-demo.ada.support/api/chatters/${event.user_data.all_data.chatter_token}/transcript/txt/`,

	// The following line is an alternative way to get part of the Ada transcript.
	// transcript: formatMessage(event.chatter_transcript, 1000, -6),
	}

	startLiveChat(handoffParams);
	},
	},
	};
	</script>

	<script
	id="__ada"
	data-handle="ada-example"
	src="https://static.ada.support/embed2.js"
	></script>
	</body>
	</html>