KixPanganiban · March 24, 2022 13:37
diff --git a/fiddle.html b/fiddle.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Custom handoff from Ada to Zoho SalesIQ Proof of Concept</title>
    <style>
      /* Hide the Ada button by default and display when needed */
      .show-button {
        display: block !important;
      }
      #ada-button-frame {
        display: none;
      }
    </style>
  </head>
  <body>
    <h1>Custom handoff from Ada to Zoho SalesIQ live chat proof of concept</h1>
    <p>Remember to update the Ada data-handle value and add your Zoho SalesIQ embed script</p>
    
    <!-- Replace this line with your Zoho SalesIQ embed script -->

    <script>
      let adaButton;
    
      $zoho.salesiq.ready=function(){
        $zoho.salesiq.floatbutton.visible("hide");
      }

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

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

        if (lastChatOpened === "zoho") {
          startSalesIq();
        } else {
          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 startSalesIq(name, email, transcriptUrl) {
        $zoho.salesiq.floatbutton.visible("show");
        $zoho.salesiq.floatwindow.visible("show");

        // Optionally hide previous SalesIQ chats
        $zoho.salesiq.pastchat.visible('hide');
        
        setLastChatOpened("zoho");
        hideAda();
        
        $zoho.salesiq.visitor.name(name);
        $zoho.salesiq.visitor.email(email);
        $zoho.salesiq.visitor.info({"Transcript": transcriptUrl});
        
        $zoho.salesiq.chat.complete(function(visitid, data) {
          $zoho.salesiq.floatwindow.visible("hide");
          $zoho.salesiq.floatbutton.visible("hide");
          displayAda();
        });
      }
      
      window.adaSettings = {
        adaReadyCallback: () => {
          adaButton = document.querySelector("#ada-button-frame");
          checkLastChatOpened();
        },
        eventCallbacks: {
          custom_handoff: (event) => {            
            const name = event.user_data.global.first_name;
            const email = event.user_data.global.email;
            const transcriptUrl = `https://custom-handoff-demo.ada.support/api/chatters/${event.user_data.all_data.chatter_token}/transcript/txt/`;

            $zoho.salesiq.ready=startSalesIq(name, email, transcriptUrl);
          },
        },
      };
    </script>
    <script
      id="__ada"
      data-handle="ada-example"
      src="https://static.ada.support/embed2.js"
    ></script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Custom handoff from Ada to Zoho SalesIQ Proof of Concept</title>
	<style>
	/* Hide the Ada button by default and display when needed */
	.show-button {
	display: block !important;
	}
	#ada-button-frame {
	display: none;
	}
	</style>
	</head>
	<body>
	<h1>Custom handoff from Ada to Zoho SalesIQ live chat proof of concept</h1>
	<p>Remember to update the Ada data-handle value and add your Zoho SalesIQ embed script</p>

	<!-- Replace this line with your Zoho SalesIQ embed script -->

	<script>
	let adaButton;

	$zoho.salesiq.ready=function(){
	$zoho.salesiq.floatbutton.visible("hide");
	}

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

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

	if (lastChatOpened === "zoho") {
	startSalesIq();
	} else {
	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 startSalesIq(name, email, transcriptUrl) {
	$zoho.salesiq.floatbutton.visible("show");
	$zoho.salesiq.floatwindow.visible("show");

	// Optionally hide previous SalesIQ chats
	$zoho.salesiq.pastchat.visible('hide');

	setLastChatOpened("zoho");
	hideAda();

	$zoho.salesiq.visitor.name(name);
	$zoho.salesiq.visitor.email(email);
	$zoho.salesiq.visitor.info({"Transcript": transcriptUrl});

	$zoho.salesiq.chat.complete(function(visitid, data) {
	$zoho.salesiq.floatwindow.visible("hide");
	$zoho.salesiq.floatbutton.visible("hide");
	displayAda();
	});
	}

	window.adaSettings = {
	adaReadyCallback: () => {
	adaButton = document.querySelector("#ada-button-frame");
	checkLastChatOpened();
	},
	eventCallbacks: {
	custom_handoff: (event) => {
	const name = event.user_data.global.first_name;
	const email = event.user_data.global.email;
	const transcriptUrl = `https://custom-handoff-demo.ada.support/api/chatters/${event.user_data.all_data.chatter_token}/transcript/txt/`;

	$zoho.salesiq.ready=startSalesIq(name, email, transcriptUrl);
	},
	},
	};
	</script>
	<script
	id="__ada"
	data-handle="ada-example"
	src="https://static.ada.support/embed2.js"
	></script>
	</body>
	</html>