Installing & testing the mobile code snippet.
For the most customization:
Our previous chapters explained that using API calls to implement a mobile channel survey with your own design offers the most customization options. This gives you complete control over the look and feel of your survey within the mobile app.
Looking for a simpler approach?
If you'd prefer a simpler setup during the survey creation process, we can provide you with a custom HTML snippet for easier installation. This snippet 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>
Using the HTML Snippet:
Embed it directly: You can place the snippet within a web container on your mobile app. This is similar to embedding a web page within your app.
Use it as a starting point: The snippet can serve as a foundation for building a custom solution that works natively within your specific mobile platform. This gives you more control over the look and feel, but requires more development effort.
Testing
To test the snippet, we suggest either doing so on a staging environment, or a non-critical website.
You can test the snippet using a 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>
Updated 2 months ago