Personnalisez la liseuse PDF à vos couleurs (Fonctionnalité expérimentale)

Sophie

11 juin 2021 20:12

Fonctionnalité expérimentale

La procédure suivante est une fonctionnalité expérimentale, en attendant une intégration plus poussée et davantage accessible au grand public dans l’éditeur ARGO.

Ce tutoriel vous apprendra comment :

Personnaliser les couleurs primaires et secondaires de votre liseuse
Personnaliser la favicon de la liseuse dans votre navigateur internet
Ajouter un écran de chargement personnalisé à vos couleurs

Nota Bene :

Vous pouvez personnaliser votre liseuse à l’aide des assets webview de votre éditeur, disponibles avec la formule d’abonnement “Advanced” (Contactez un account manager pour en savoir plus sur la formule Advanced).

Ces assets dits “de contrôle” sont interprétés lors de l’ouverture du Smartlink dans le navigateur internet et ne sont pas présents dans le document final. Ils envoient simplement des instructions à la liseuse PDF lors de son ouverture afin de personnaliser l’interface de celle-ci, comme sur les exemples ci-dessous.

Vous devez paramétrer 2 assets Webview pour personnaliser la liseuse.
Ils portent les noms suivants :

loadingAnimation : permet de paramétrer l’écran de chargement de votre smartlink au moment de son ouverture dans un navigateur. Le temps d’affichage de l’écran de loading correspond au temps de chargement du document.

Chrome : permet de personnaliser les couleurs de la liseuse et la favicon une fois votre smartlink ouvert dans un navigateur

Asset Webview loadingAnimation

1 - Ouvrez l’éditeur ARGO sur le Smartlink de votre choix. Restez en 1ere page.

2 - Sélectionnez l’asset Html et placez-le dans un angle mort de votre document (l’asset sera invisible dans le rendu final)

3 - Renseignez le nom loadingAnimation dans le champ titre de votre asset Html

Attention : Ne modifiez en aucun cas le titre de cet asset dans votre éditeur, sinon il ne sera pas exécuté. Vous devez laisser le titre tel quel, avec la même casse.

4 - Supprimez la cover icon par défaut présente sur l’asset Html afin que celui-ci ne soit pas visible dans la liseuse.
Cliquez sur l’icône “croix” à côté de “Ajouter” dans le champ Cover Icon.
L’image par défaut est alors remplacée par un calque transparent : votre asset n’est plus visible.
5- Ouvrez la fenêtre d’édition de l’asset Html en cliquant sur le champ “Modifier HTML”
Vous allez maintenant pouvoir personnaliser le template optimisé pour notre présentation de documents. Copiez / collez le code ci-dessous (remplacez les champs en rouge par vos propres contenus)

N.B : cliquez sur les liens en rouge, ils vous informeront des pré-requis nécessaires (taille,format, références…)

<div id="loaderZ" style="background-color: #dedede">
<div class="loaderLogoZ" style="background:url(https://api.bear2b.com/media/189384290360426d0b46fe19.73176292.png) center center no-repeat"></div>
<div id="loadingContentZ" style="border-top-color: #9be5f9"></div>
</div>
<style>
html[dir=ltr] body #loaderZ {
position: fixed;
width: 100%;
height: 100%;
z-index: 1000;
background: url(https://api.bear2b.com/media/15435861956042840e7e7584.79462633.jpg) ;
display: block;
transition: opacity 0.5s ease-out; }

html[dir=ltr] body .loaderLogoZ {
position: fixed;
z-index: 1000000000000000000000;
top: 50%;
left: 50%;
margin-top: -55px;
margin-left: -55px;
width: 150px;
height: 150px;
background: transparent; }

html[dir=ltr] body #loadingContentZ {
border: 20px solid #fff;
border-top: 20px solid #000B37;
border-radius: 50%;
width: 150px;
height: 150px;
animation: spin 2s linear infinite;
position: fixed;
left: 50%;
top: 50%;
margin-top: -75px;
margin-left: -75px }

@keyframes spin {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg) } }
</style>

Sauvegardez l'édition de votre Smartlink et ouvrez ce dernier dans votre navigateur. Si vous avez correctement paramétré le code ci-dessus, vous venez de personnaliser l'écran de chargement de votre document: bravo!

Asset Webview chrome

1 - Sélectionnez un nouvel asset Html et placez-le dans votre éditeur à côté de votre document, toujours en page 1 de votre document (l’asset sera lui aussi invisible dans le rendu final)

2 - Renseignez le nom chrome dans le champ titre de votre asset

Attention : Ne modifiez en aucun cas le titre de cet asset dans votre éditeur, sinon il ne sera pas exécuté. Vous devez laisser le titre tel quel, avec la même casse.

3 - Supprimez la cover icon par défaut présente sur l’asset Html afin que celui-ci ne soit pas visible dans la liseuse. Cliquez sur l’icône “croix” à côté de “Ajouter” dans le champ Cover Icon.
L’image par défaut est alors remplacée par un calque transparent : votre asset n’est plus visible.

4 - Ouvrez la fenêtre d’édition de l’asset Html.
Copiez / collez le code ci-dessous dans votre asset Html et personnalisez votre template comme vous venez de le faire pour l'asset loadingAnimation (remplacez les champs en rouge par vos propres contenus).

N.B : cliquez sur les liens en rouge, ils vous informeront des pré-requis nécessaires (taille,format, références…)

/* also:
PDFZ.api.setFont(
"Open Sans Light",
"https://fonts.googleapis.com/css?family=Open+Sans:300"
);
*/
PDFZ.api.setFont("Open Sans Light", {
src: "https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRa1RVmPjeKy21_GQJaLlJI.woff",
format: "woff",
style: "normal",
weight: 300
});

PDFZ.api.setFavicon({
href:"https://www.google.com/s2/favicons?domain=https://ar-go.co/",
type:"image/png"
});

var primaryColor = "#000B37";
var bodyColor = "#9be5f9";

PDFZ.api.setColors({
sidebarBackground: "white",
selectedThumbnail:"#000B37",
background:"#9be5f9",
toolbar:{
fill:primaryColor,
text:"#F2F2F2"
},
toolbarInput:{
background:bodyColor,
text:primaryColor
},
toolbarToggle:{
checked:"#55bcd4",
unchecked:"#066b50",
handle:"#f2f2f2"
},
progress:{
fill:"#dddddd",
background:"#9be5f9" // darker primaryColor
}
});

</script>

Une fois vos deux assets ajoutés en 1ere page de votre document et paramétrés, sauvegardez l’édition de votre Smartlink.
Retournez sur l’interface ARGOflow et visualisez votre Smartlink dans le navigateur.
Si vous avez correctement paramétré les différents champs de ces deux template Html, vous devriez voir apparaître un écran de chargement à l’ouverture du Smartlink ainsi que vos couleurs dans la liseuse PDF.

BRAVO, vous venez de personnaliser l’interface de votre liseuse PDF.

Vous pouvez désormais copier/coller ces deux assets en première page de tous vos Smartlinks afin d’appliquer ce template à l’ensemble de vos documents.
Vous pouvez également personnaliser ces templates de façon différente sur chacun de vos smartlinks en fonction de vos besoins.

Bonne découverte de la solution ARGOflow.

Personnalisez la liseuse PDF à vos couleurs (Fonctionnalité expérimentale)

Commentaires

Articles dans cette section