Add a delay pop-up over your documents

Sophie

October 06, 2021 19:53

Find out in this short tutorial how to integrate a delay pop-up to your shared documents, in order to collect valuable user data or simply display a targeted promotional message.

This tutorial is intended for advanced users who have some basic skills in coding :)
For others, don't be shy, ask us for help! (support@ar-go.co)

What is a delay pop-up?

A pop-up is a marketing term that can be defined in several ways. On the Internet, in the context of digital marketing, a pop-up refers to a window that appears on the screen automatically when a web page is opened. Most of the time, it is an advertising message.

A delayed pop-up is a window that appears after a certain delay (sec, min) once the document is opened in the ARGOflow reader.
This display requires an action from the user (click to close, fill in data...) and can be useful for marketing purposes, such as :

Display an ad with a special offer after a certain period of time
Tease your readers by offering them access to read the document for a set time before asking them to sign in

How to set up a delay pop-up on one of your Smartlinks?

Open the interaction editor on your target document, and remain on 1st page if your document has several pages
Select the "Webview" asset and drag it onto the workspace
Check the "Autoplay" option which will allow the code contained in this webview to run as soon as the reader is opened in the browser.
Click on the "cross" icon in the "Image" field to replace the default cover image with a transparent one.
Then click on the "Edit HTML" field, an html editing window opens
Here is an example of code to trigger a window with an information form that appears 5 seconds after document opening.

Color code
- In red the mandatory code elements
- In green the code to modify (You can directly modify the html provided or fill in your own code)
- In blue the number of seconds to modify to specify the opening delay
- In purple the space where to insert your command lines to go and populate the database of your choice (in this case to go and register the user data recovered)

<html>
<head>
<script id="onload">
/******* SECTION TO CUSTOMIZE *******/
var nagHtml = `
<div class="pico-content pico-modal" id="pico-1" role="dialog" aria-describedby="pico-1" style="display: block; position: fixed; z-index: 10001; left: 50%; top: 38.1966%; max-height: 90%; box-sizing: border-box; width: min(90%, 400px); transform: translate(-50%, -38.1966%); flex-direction: column; overflow: auto; background-color: white; padding: 4px 38px; border-radius: 4px;">
<div class="pico-modal__wrapper">
<br>
<h2 class="pico-modal__title" data-l10n-id="cred_title">
ARGO
</h2>
<span class="pico-modal__subtitle" data-l10n-id="cred_subtitle">
Merci de l'intérêt porté à ce document.
Nous vous invitons à vous identifier afin de poursuivre sa lecture.
</span>
<br>
<div style="width:100%">
<label for="email" class="pico-modal__label"><b data-l10n-id="cred_email">NOM</b></label>
<br>
<input type="text" name="nom" id="nag_nom" class="pico-modal__input">
<br>
<label for="email" class="pico-modal__label"><b data-l10n-id="cred_email">PRÉNOM</b></label>
<br>
<input type="text" name="prénom" id="nag_prenom" class="pico-modal__input">
<br>
<label for="email" class="pico-modal__label"><b data-l10n-id="cred_email">EMAIL</b></label>
<br>
<input type="text" name="email" id="nag_email" class="pico-modal__input">
<br>
<label for="email" class="pico-modal__label"><b data-l10n-id="cred_email">TÉLÉPHONE</b></label>
<br>
<input type="text" name="téléphone" id="nag_telephone" class="pico-modal__input">
<br>
<br>

</div>
<br>
<button id="nag_envoyer" class="pico-modal__button" data-l10n-id="cred_continue">ENVOYER</button>
<br>
</div>
</div>
`;
var nagCss = `
{
background-color:white;
left: 30%;
right: 30%;
top: 20%;
bottom: 20%;
text-align: center;
padding: 10px;
}
`;
var nagTimeoutInSecond = 5;
function sendFormData() {
/* Read the data from the form and send it to a dedicated service */
}
/***** END SECTION TO CUSTOMIZE *****/
console.debug("nagscreen load");
const storageKey = PDFZ.api.getPdfzUuid() + "_nag";
function closeNagScreen() {
localStorage.setItem(storageKey, "passed");
PDFZ.api.resetModal();
PDFZ.api.thawWindow();
}
function openNagScreen() {
PDFZ.api.freezeWindow();
PDFZ.api.setModalHtml(nagHtml);
PDFZ.api.setModalStyle(nagCss);
setTimeout(() => {
window.parent.document.getElementById("nag_envoyer").onclick = () => {
sendFormData();
closeNagScreen();
};
});
}
if(typeof PDFZ === "undefined") {
alert("Internal error. Please reload.");
} else {
const nagged = localStorage.getItem(storageKey);
console.debug("nag:", nagged);
if(!nagged) {
setTimeout(openNagScreen, nagTimeoutInSecond*1000);
}
}
</script>
</head>
</html>

Copy/paste your code once satisfied into the HTML window of the Webview asset.
Click on "save" and then on the save icon once in the editor.
Open your Smartlink in a browser and wait the time set in your code: your pop-up window will open with the message/form/layout you designed.

CONGRATULATIONS, you integrated a delayed pop-up window on your augmented document!

Add a delay pop-up over your documents

What is a delay pop-up?

How to set up a delay pop-up on one of your Smartlinks?

Comments

Articles in this section