How to automatically show decision tree as a pop up on your website page.

  • Von

This is useful if you need something that captures the lead as prerequisite of getting access to the content of your page. The page they need access to is visible in the background and the DT is shown as pop up.

Step1: Get your decision tree account domain and token here:

Step2: Use this code on your website:

<style>
  .dt-popup-btn {
    display: none; /* Hide the button */
  }
</style>

<button class="dt-popup-btn" onclick="showDTPopup('#mydt')" ontouchstart="showDTPopup('#mydt')">Show Decision Tree</button>
<div class="dt-popup" id="mydt">
  <div class="dt-popup-dialog" role="document">
    <div class="dt-popup-content">
      <span class="dt-close" onclick="hideDTPopup('#mydt')">x</span>
      <div class="quiz-container" style="text-align: center;" data-quiz="REPLACE_WITH_YOUR_DT_TOKEN" data-version="s" data-offset="0" data-autoscroll="yes"></div>
      <script src="https://REPLACE_WITH_YOUR_ACCOUNT_DOMAIN/s/js_embed"></script>
    </div>
  </div>
</div>

<script>
  function showDTPopup(e) {
    document.body.classList.toggle("show-dt-popup");
    document.querySelector(e).classList.toggle("dt-visible");
  }

  function hideDTPopup(e) {
    document.body.classList.toggle("show-dt-popup");
    document.querySelector(e).classList.toggle("dt-visible");
  }

  // Automatically show the decision tree when the page loads
  window.onload = function() {
    showDTPopup('#mydt');
  };
</script>

<script>
  window.addEventListener('message', function(event) {
    if (event.origin !== "https://REPLACE_WITH_YOUR_ACCOUNT_DOMAIN") return;

    if (event.data.action === "closePopup") {
      hideDTPopup('#mydt'); 
    }
  });
</script>

Step3: Add this script in your results node run on enter.

<script>
  window.parent.postMessage({ action: 'closePopup' }, '*');
</script>

Optional: I you want to remove the ‘X’ so users cannot close the pop up window, remove this line in your code:

<span class="dt-close" onclick="hideDTPopup('#mydt')">x</span>
Tagged: