Installing and testing the snippet

As we have explained in previous chapters, the best customization options comes with implementing mobile channel survey with your own design, using API calls instead of HTML snippet.

If you would like to simplify this task on the Implement step of survey creation, you will be provided with a custom html snippet to install the mobile app survey. It will look something like this:

<!-- paste this code in your application -->
<style>
  .mobile-channel-template.survey.zl-container {font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;max-width:400px;margin:0 auto;}
  .mobile-channel-template.survey .m-r-2 {margin-right:20px;}
  .mobile-channel-template.survey .m-t-2 {margin-top:20px;}
  .mobile-channel-template.survey {padding:90px 15px 15px 15px;}
  .mobile-channel-template.survey .question {color:#0e1116;font-size:15px;font-weight:600;line-height:1.4;white-space:pre-line;word-break:break-word;}
  .mobile-channel-template.survey .comment-question {margin-top:20px;margin-bottom:15px;}
  .mobile-channel-template.survey ul {overflow:hidden;margin:0;padding:0;display:inline-block;}
  .mobile-channel-template.survey ul li {display:inline-block;float:left;}
  .mobile-channel-template.survey label {text-decoration:none;text-align:center;color:#555;display:block;font-weight:600;border-radius:100%;border:3px solid #c1c1c1;height:36px;width:36px;line-height:30px;box-sizing:border-box;margin-bottom:0;}
  .mobile-channel-template.survey .score-labels {overflow:hidden;margin:10px auto 0 auto;max-width:400px;}
  .mobile-channel-template.survey .score-labels p {color:#adb5bd;display:inline-block;float:left;font-size:12px;width:50%;}
  .mobile-channel-template.survey .score-labels .max-score {text-align:right;}
  .mobile-channel-template.survey .comment-section .comment-content {height:80px;width:100%;border-color:#989898;border-radius:4px;resize:none;margin-bottom:10px;padding:8px;box-sizing:border-box;}
  .mobile-channel-template.survey .zl-submit-btn {background-color:#7ec03b;border-radius:5px;color:#FFFFFF;display:block;font-weight:600;text-align:center;font-size:15px;width:100%;padding:15px;border:none;}
  .mobile-channel-template.survey input[type="radio"] {opacity:0;position:absolute;}
  .mobile-channel-template.survey :checked + label {color:#fff;background-color:#c1c1c1;}
  .zl-ta-c {text-align:center;}
</style>
<section class="mobile-channel-template survey zl-container">
  <form method="post" action="https://api.zenloop.com/web/response/<survey_hash_id>/mobile_channel_response">
    <h1 class="question zl-ta-c">How likely are you to recommend Zenloop to a friend or colleague?</h1>
    <section class="m-t-2 zl-ta-c">
      <ul>
        <li class="m-r-2">
          <input type="radio" name="answer_score" id="score-1" value="1" required>
          <label for="score-1">1</label>
        </li>
        <li class="m-r-2">
          <input type="radio" name="answer_score" id="score-2" value="2">
          <label for="score-2">2</label>
        </li>
        <li class="m-r-2">
          <input type="radio" name="answer_score" id="score-3" value="3">
          <label for="score-3">3</label>
        </li>
        <li class="m-r-2">
          <input type="radio" name="answer_score" id="score-4" value="4">
          <label for="score-4">4</label>
        </li>
        <li>
          <input type="radio" name="answer_score" id="score-5" value="5">
          <label for="score-5">5</label>
        </li>
      </ul>
    </section>
    <section class="score-labels">
      <p class="min-score">very unlikely</p>
      <p class="max-score">very likely</p>
    </section>
    <section class="comment-section">
      <p class="comment-question zl-ta-c">Tell us a bit more about why you gave this score</p>
      <textarea class="comment-content" placeholder="Leave comment" name="response"></textarea>
    </section>
    <img src="https://api.zenloop.com/web/surveys/<public_hash_id>/opened" height="1" width="1">
    <button class="zl-submit-btn" type="submit">Send</button>
  </form>
</section>

📘
You can embed the snippet within a web container or in any other native equivalent of web container.
Another option is using the snippet as a base for creating a native equivalent solution within a given mobile platform.

📘
To test the snippet, we suggest either doing so on a staging environment, or a non-critical website.

You can test the snippet using basic HTML file:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>Sample snippet test</title>
  </head>
  <body>
		<!-- snippet code goes here -->
  </body>
</html>