Skip to content

API powered popup question for visitors

Jump to bottom
Mushfiq Rahman edited this page Dec 22, 2022 · 5 revisions

An API namespace is required for the popup question form. The form is rendered in a Bootstrap modal. The modal is shown after a few seconds only if the following conditions are met:

  • visitor has consented to cookies (cookies_accepted cookie needs to be present in browser cookies)
  • popup_question_shown cookie is not present in browser cookies

popup_question_shown is the cookie that is used to track whether or not popup question has been shown.

API namespace for a popup question form:

api_namespace_for_popup_question_form

Code for popup question modal

This can be in a snippet and the snippet can be included in the default layout so that it gets applied to all pages.

<style>
    /* Styles for the modal */
</style>
<div class="modal fade" id="visitorPopupQuestionFormModal" tabindex="-1" role="dialog" aria-labelledby="visitorPopupQuestionFormModalTitle">
        <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h2 class="modal-title mr-2" id="visitorPopupQuestionFormModalTitle">Expedita accusamus est</h2>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
        </div>
            <div class="modal-body">
            <p class="visitor-popup-question-form__subtitle">
                Quia accusamus rerum harum ipsam ut commodi beatae quo aut.
            </p>
            {{ cms:helper render_form, <popup-question-form-id-here> }}
            </div>
        </div>
        </div>
</div>
<script>
    async function init() {
        // check if cookies_accepted is present in browser cookies
        // check if popup_question_shown is present in browser cookies
        const cookies_accepted = await cookieConsentExists();
        if (!cookies_accepted) return;
        const popupQuestionShownCookieExists = cookieExists("popup_question_shown");
        if (popupQuestionShownCookieExists) return;
        
        setTimeout(initPopupQuestionModal, 3000);
    }

   async function cookieConsentExists() {
     const result = await fetch(`https://${document.location.host}/cookies/fetch`);
     const data = await result.json();
     return data.hasOwnProperty('cookies_accepted');
   }
    
    function cookieExists(name) {
        return document.cookie.split("; ").some(row => row.startsWith(`${name}=`));
    }
    
    async function initPopupQuestionModal() {
        const popupQuestionModal = document.getElementById("visitorPopupQuestionFormModal");
        // don't show the modal if it's already being shown
        if (!popupQuestionModal.classList.contains("show")) {
          const form = popupQuestionModal.querySelector(".violet-cta-form");
          const formControlsOrder = {
            text_field_one: 0,
            dropdown: 1,
            text_field_two: 2,
            textarea_one: 3
          };
          rearrangeFormInputElements(form, formControlsOrder);
          $("#visitorPopupQuestionFormModal").modal({show: true});
        } 
        const cookies_accepted = await cookieConsentExists();
        
        if (cookies_accepted) {
          document.cookie = "popup_question_shown=true; SameSite=Lax; expires=Tue, 19 Jan 2038 04:14:07 GMT";
        }
    }
    init();
</script>
Clone this wiki locally