KixPanganiban · April 29, 2022 02:09
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 Drift Sample</title>
    <style>
      .show-button {
        display: block !important;
      }
      #ada-button-frame {
        display: none;
      }
    </style>
    <!-- Replace this line with your Async Drift Code -->
    <!-- Note: drift.load() is called within startDrift() in this example -->
  </head>
  <body>
    <script>
      let adaButton;
      
      function setLastChatOpened(name) {
        sessionStorage.setItem("lastChatOpened", name);
      }

      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 checkLastChatOpened() {
        let lastChatOpened = sessionStorage.getItem("lastChatOpened");

        if (lastChatOpened === "drift") {
          const first_name = sessionStorage.getItem("name");
          const email = sessionStorage.getItem("email");
          startDrift(first_name, email);
        } else {
          adaButton.classList.add("show-button");
        }
      }

      function startDrift(first_name, email) {
        drift.load("x");  // Replace 'x' with your embed ID
        drift.on("ready", function (api, payload) {
          drift.api.widget.show();
          drift.api.openChat();
          drift.api.setUserAttributes({
            email: email,
            name: first_name,
          });
          setLastChatOpened("drift");
          hideAda();

          drift.on("chatClose", function (event) {
            api.widget.hide();
            displayAda();
          });
        });
      }

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

            // Optionally save customer info to sessionStorage to accommdate for page reloads
            sessionStorage.setItem("name", first_name);
            sessionStorage.setItem("email", email);

            startDrift(first_name, email);
          },
        },
      };
    </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 Drift Sample</title>
	<style>
	.show-button {
	display: block !important;
	}
	#ada-button-frame {
	display: none;
	}
	</style>
	<!-- Replace this line with your Async Drift Code -->
	<!-- Note: drift.load() is called within startDrift() in this example -->
	</head>
	<body>
	<script>
	let adaButton;

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

	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 checkLastChatOpened() {
	let lastChatOpened = sessionStorage.getItem("lastChatOpened");

	if (lastChatOpened === "drift") {
	const first_name = sessionStorage.getItem("name");
	const email = sessionStorage.getItem("email");
	startDrift(first_name, email);
	} else {
	adaButton.classList.add("show-button");
	}
	}

	function startDrift(first_name, email) {
	drift.load("x"); // Replace 'x' with your embed ID
	drift.on("ready", function (api, payload) {
	drift.api.widget.show();
	drift.api.openChat();
	drift.api.setUserAttributes({
	email: email,
	name: first_name,
	});
	setLastChatOpened("drift");
	hideAda();

	drift.on("chatClose", function (event) {
	api.widget.hide();
	displayAda();
	});
	});
	}

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

	// Optionally save customer info to sessionStorage to accommdate for page reloads
	sessionStorage.setItem("name", first_name);
	sessionStorage.setItem("email", email);

	startDrift(first_name, email);
	},
	},
	};
	</script>
	<script
	id="__ada"
	data-handle="ada-example"
	src="https://static.ada.support/embed2.js"
	></script>
	</body>
	</html>