<button class="heidi-button" style="display: none;" onclick="openHeidi()">
  Open Heidi
</button>
<button class="heidi-button" style="display: none;" onclick="openHeidiWithTemplate()">
  Open Heidi with Template
</button>
<button class="heidi-button" style="display: none;" onclick="closeHeidi()">
  Close Heidi
</button>
 
<script>
  const templateData = {
    content: '...',
    responses: [
      {
        questionId: '...',
        question: '...',
        answerType: '...',
        answerOptions: ['...', '...'],
      },
    ],
  };
 
  function openHeidiWithTemplate() {
    Heidi.open({ template: templateData });
  }
 
  function openHeidi() {
    Heidi.open();
  }
 
  function closeHeidi() {
    Heidi.close();
  }
 
  const heidiOptions = {
    token: 'VALID_JWT_TOKEN',
    target: '#heidi',
    onInit: () => {
      // Display the UI that will trigger Heidi
      document
        .querySelectorAll('.heidi-button')
        .forEach((button) => (button.style.display = 'block'));
    },
    onReady: () => {
      Heidi.onPushData((data) => {
        // data.notesData will contain data generated by Heidi
        // if a template was used, it will contain the result
        // using the Template structure above
 
        console.log(data);
      });
 
      Heidi.onSessionStarted((sessionId) => {
        // sessionId is the ID of the current Heidi Session.
      });
    },
  };
 
  (function (s, o) {
    const script = document.createElement('script');
    script.async = true;
    script.src = s;
    document.head.append(script);
    script.addEventListener('load', () => new Heidi(o));
  })('https://registrar.widget.heidihealth.com/staging/widget/heidi.js', heidiOptions);
</script>