Add a Macorva Survey to Your Website – A Simple Guide

Integrating a feedback system into your website is a powerful way to connect with your customers. Macorva CX surveys offer a seamless and engaging way to gather valuable insights. And the good news? You don't need to be a tech wizard to set it up! Here’s a straightforward guide to help you or your team integrate a Macorva survey button on your website. An example of what this might look like can be found here. Just follow these easy steps to add this to your website:

Step-by-Step Instructions:

Step 1: Insert JavaScript Code

First, we'll start by adding a small piece of JavaScript code to your website. Don't worry, it's simpler than it sounds. Just copy and paste the code below into the <head> section of your website's HTML. This is usually done in the header file or template of your site.

<script>
const MACORVA_SURVEY_URL = '';

 const showMacorvaSurvey = () => {
    const [modalBody, survey] = createMacorvaModal();
    survey.src = MACORVA_SURVEY_URL;
    modalBody.appendChild(survey);
};

  const createMacorvaModal = () => {
    const modal = document.createElement('div');
    const modalBody = document.createElement('div');
    const modalClose = document.createElement('button');
    const survey = document.createElement('iframe');
    modal.classList.add('macorva-modal');
    modalBody.classList.add('macorva-modal-body');
    modalClose.classList.add('macorva-modal-close');
    survey.classList.add('macorva-survey');
    modalClose.innerText = '✕';
    modalBody.appendChild(modalClose);
    modal.appendChild(modalBody);
    modal.addEventListener('click', (event) => {
      if (!modalBody.contains(event.target)) {
        document.body.removeChild(modal);
      }
    });
    modalClose.addEventListener('click', () => {
      document.body.removeChild(modal);
    });
    document.body.appendChild(modal);
    return [modalBody, survey];
  };
</script>

Step 2: Fill in Your Details

Next, replace MACORVA_SURVEY_URL with the static link to the preferred Macorva survey

Step 3: Add Custom Styles with CSS

To make the survey button look good and fit seamlessly with your site, you'll need to add some styling. Just like with the JavaScript, simply copy the CSS code below and paste it into the <head> section of your HTML. Then you can enter your customization to help the button fit your company branding. This will style the survey modal and button to make it visually appealing.

<style>
  .macorva-modal {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 100;
  }

  .macorva-modal-body {
    background: white;
    border-radius: 0.5rem;
    padding: 3rem 0 0 0;
    width: 850px;
    height: calc(100vh - 5rem);
    max-width: calc(100vw - 5rem);
    box-sizing: border-box;
    display: flex;
    position: relative;
  }

  .macorva-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 1rem;
    height: 1rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
  }

  .macorva-survey {
    border: none;
    flex: 1;
  }
</style>

Step 4: Place the Survey Button

Finally, decide where you want the survey button on your page. Once you've chosen the perfect spot, paste the following HTML code there. This creates a clickable button that users can press to open the survey.

<button type="button" onclick="showMacorvaSurvey();">Click here to leave feedback</button>

And that's it!

You've successfully integrated a Macorva survey into your website. This simple yet effective tool will help you gather valuable customer feedback with ease.

Remember, you don’t have to do this alone. If you're managing a technical team, share these instructions with them, and they'll know exactly what to do. If you encounter any issues or need assistance, don’t hesitate to reach out to Macorva's support team. We’re here to help you every step of the way in enhancing your customer engagement.

Was this article helpful?

Can’t find what you’re looking for?