polite-email-popup
Version:
A polite email popup
82 lines • 5.72 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Generate a Polite Email Popup for Your Website!</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css?v=56790">
<link rel="stylesheet" href="css/main.css?v=56790">
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js?v=56790" defer></script>
<script src="js/main.js?v=56790" defer></script>
</head>
<body>
<div class="config">
<center><h1>Generate a Polite Email Popup<br>for Your Website!</h1></center>
<div style="text-align: right;">
<a style="display: inline-block; border: 1px solid #41adff; padding: 5px 10px;" href="https://share.getcloudapp.com/Z4ukblYL" target="_blank">▶️ Watch 8 min tutorial</a>
</div>
<div style="text-align: right; margin-top: 1rem;">
<a style="display: inline-block; border: 1px solid #41adff; padding: 5px 10px;" href="https://docs.google.com/document/d/1zBnJ2lj0PW0lkdfggaJytKFnDkggymcDGi4iG09FqPc/edit?usp=sharing" target="_blank">▶️ Read the full guide</a>
</div>
<div class="general-config">
<h2>Configure your popups:</h2>
<div class="light" style="margin-bottom: 3rem;"><b>If you leave any of these fields blank, they'll be set to safe defaults by the Polite Email Popup library.</b></div>
<label for="image-src" class="block">Logo image URL <span class="label-note">(This URL can be relative to your website, like <code>/images/my-image.png</code>)</span></label>
<input id="image-src" class="general-config__image-src js-popup-config-input" type="text" value="https://websharebox.s3.amazonaws.com/placeholder-logo.png">
<label for="heading-text" class="block">Heading text</label>
<input id="heading-text" class="general-config__heading-text js-popup-config-input" type="text" value="Sign up for our newsletter">
<label for="description-text" class="block">Description text</label>
<input id="description-text" class="general-config__description-text js-popup-config-input" type="text" value="Follow along to receive valuable tips and insider knowledge">
<label for="main-button-text" class="block">Main button text</label>
<input id="main-button-text" class="general-config__main-button-text js-popup-config-input" type="text" value="Sign up">
<label for="success-message" class="block">Success message</label>
<input id="success-message" class="general-config__success-message js-popup-config-input" type="text" value="Thank you for signing up!">
<label for="failure-message" class="block">Failure message</label>
<input id="failure-message" class="general-config__failure-message js-popup-config-input" type="text" value="Sorry, sign up failed...">
<div style="margin-bottom: 1rem;">
<label class="block">Type of website</label>
<div>
<input id="content-website" type="radio" name="type-of-website" value="content" checked="">
<label for="content-website">Content website <span class="light">(a long piece of content, like a blog post)</span></label>
</div>
<div>
<input id="marketing-website" type="radio" name="type-of-website" value="marketing">
<label for="marketing-website">Marketing website <span class="light">(a multi-page website that people browse)</span></label>
</div>
</div>
<label class="block">Trigger popups sooner?</label>
<input id="be-slightly-more-aggressive" type="checkbox">
<label for="be-slightly-more-aggressive">Make popups trigger slightly more aggressively</label>
<details>
<summary>Show debug notice? <span class="light">(only enable this for testing, not permanently)</span></summary>
<div style="margin-top: 1rem;">
<input id="show-debug-notice" type="checkbox">
<label for="show-debug-notice">Show a notice where you can keep track of Polite Email Popup's parameters</label>
</div>
</details>
</div>
<details class="mailchimp-config">
<summary>Add support for Mailchimp or ConvertKit</summary>
<div style="margin-top: 1.5rem; text-align: right;">
<a style="display: inline-block; border: 1px solid #41adff; margin-right: 1rem; padding: 5px 10px;" href="https://share.getcloudapp.com/4gu9w01R" target="_blank">▶️ How to add Mailchimp (2 min)</a>
<a style="display: inline-block; border: 1px solid #41adff; padding: 5px 10px;" href="https://share.getcloudapp.com/Z4uk7v0L" target="_blank">▶️ How to add ConvertKit (2 min)</a>
</div>
<label class="block" for="config-code">Paste your embeddable form code here:</label>
<div class="mailchimp-config__hidden-form"></div>
<textarea id="config-code" class="mailchimp-config__code js-popup-config-input"></textarea>
</details>
<button class="generate-code-button">Generate Code!</button>
</div>
<div class="output-config hide">
<h2>Ouput code:</h2>
<label class="block">Paste the following code into your website to enable the Polite Email Popup plugin!</label>
<div style="text-align: right; margin-bottom: .25rem; margin-top: 1rem;">
<button class="copy-code-button inline-block" data-clipboard-target=".output-config__code">Copy code to clipboard</button>
</div>
<textarea class="output-config__code"></textarea>
<div class="note">
<div class="note-heading">Note:</div>
<div>Although you can add this code anywhere on your website and it will work, it's recommended that you put this code in the footer of your website, right before the closing <code></body></code> tag.</div>
</div>
</div>
</body>
</html>