Paramétrage du template “QR Code”

Avec le tem­plate QR Code (qrcode), vous allez pou­voir déclencher l’appareil pho­to du smart­phone de l’utilisateur de votre webapp pour l’inviter à scan­ner un QR code.

Vous pou­vez envoy­er l’utilisateur vers une page de votre choix en cas de bon ou mau­vais QR code scanné.

Vous avez égale­ment la pos­si­bil­ité d’afficher un bou­ton de nav­i­ga­tion dans le coin supérieur gauche et dans le coin supérieur droit, et de définir vers quelles scènes ils ren­voient, le menu ou la page précé­dente par exemple.

Lorsque vous cliquez sur l’op­tion “gér­er le con­tenu” de votre scène de type “choic­es”, vous pou­vez paramétr­er ses dif­férents contenus.

Onglet “Général”

Le champ “Back­ground” vous per­met de choisir une image de fond pour votre scène, par­mi les médias upload­és dans la Galerie de médias.
Si vous ne définis­sez pas d’im­age, le fond sera blanc.
Astuce : Une couleur de fond peut égale­ment être définie dans le CSS per­son­nal­isé du projet.

Le champ “CONTENT” vous per­met de rédi­ger un texte qui s’af­fichera au cen­tre de l’écran. C’est là que vous allez inviter l’u­til­isa­teur à trou­ver et à scan­ner un QR Code.

Le champ “BUTTON_LABEL” vous per­met de définir le mot que vous voulez inscrire sur le bou­ton qui déclenche le scan. Prob­a­ble­ment le mot “scan­ner”.

Le champ “PROCESSING_CONTENT” vous per­met de définir un texte qui s’af­fichera pen­dant que FRIGG analyse le QR Code. Par exem­ple “Veuillez patienter…”

Quand l’u­til­isa­teur clique sur le bou­ton “Scan­ner”, l’ap­pareil pho­to du smart­phone s’ou­vre automa­tique­ment, ou la galerie de pho­tos. Il faut alors pren­dre le QR Code en pho­to, ou le séléc­tion­ner dans la galerie de pho­to, et valid­er ce choix.

Onglet “TARGET”

Vous allez ici pou­voir définir la ou les scènes cibles valides. Il peut en effet y avoir plusieurs QR Codes valides à l’en­droit où l’u­til­isa­teur se trou­ve, qui ren­voient cha­cun vers une scène dif­férente. Il vous appar­tient alors de générez les QR Code cor­re­spon­dants aux bonnes URL pour les plac­er dans votre parcours.

Le champ “AUTHORIZED_LINK” vous per­met donc de définir les scènes cibles. Pour en ajouter une, cliquez sur “ajoutez un élé­ment “con­nec­tion””.

Onglet “FAILURE”

Vous allez ici définir ce qu’il se passe en cas de mau­vais QR Code scanné.

Le champ “FAILURE_LINK” vous per­met de diriger l’u­til­isa­teur vers une nou­velle scène si celui-ci a scan­né un mau­vais QR Code.

Le champ “ERROR_CONTENT” vous per­met d’af­fich­er un mes­sage sur la même scène si FRIGG a du mal à analyser le QR Code, ou pense que ça n’en est pas un. Vous pou­vez par exem­ple affich­er “Je n’ai pas réus­si à lire votre QR Code. Recom­mencez en vous approchant d’a­van­tage, ou essayez de l’éclairer.”

Onglet “BYPASS”

Vous pou­vez pro­pos­er un moyen de con­tourn­er le QR Code, par exem­ple s’il est dif­fi­cile à trou­ver, ou qu’il a pu être déte­ri­oré, et que vous ne voulez pas blo­quer l’u­til­isa­teur dans son expérience.

Le champ “BYPASS_LABEL” vous per­met d’in­scrire une phrase au pied de votre scène, qui invite l’u­til­isa­teur à cli­quer dessus s’il est blo­qué. Par exem­ple : “Pas de QR Code à l’horizon ?”

Le champ “BYPASS_LINK” vous per­met de diriger l’u­til­isa­teur vers une nou­velle scène s’il clique sur cette phrase.

Onglet “NAVIGATION”

L’on­glet “Nav­i­ga­tion” vous per­met de paramétr­er les bou­tons que vous pou­vez affich­er dans les angles supérieurs de votre scène.
MAIN_NAV indique le bou­ton de nav­i­ga­tion prin­ci­pal, c’est à dire celui qui s’af­fiche en haut à gauche de l’écran.

SECONDARY_NAV indique le bou­ton de nav­i­ga­tion sec­ondaire, c’est à dire celui qui s’af­fiche en haut à droite de l’écran.

Si vous ne ren­seignez aucune infor­ma­tion dans ces champs, les bou­tons n’ap­pa­raitront pas.

Le champ “MAIN_NAV_ICON” vous per­met de définir l’im­age de votre bou­ton de nav­i­ga­tion prin­ci­pal, que vous avez au préal­able inté­gré dans votre galerie de médias.
Le champ “MAIN_NAV_LINK” vous per­met de définir vers quelle scène ce bou­ton enver­ra l’u­til­isa­teur. Vous avez 3 pos­si­bil­ités pour définir cette connexion :
1- Vous pou­vez ain­si choisir par­mi les con­nex­ions exis­tantes, c’est à dire qui ont déjà été attribuées à cette scène.
2- Vous pou­vez créer une nou­velle con­nex­ion, en choi­sis­sant une scène par­mi toutes celles que vous avez créée dans votre projet.
3- Vous pou­vez créer une con­nex­ion de nav­i­ga­tion, c’est à dire ren­voy­er automa­tique­ment vers la pre­mière scène du pro­jet, ou vers la scène qui a été vis­itée précédem­ment par l’utilisateur.

Vous pou­vez répéter les mêmes réglages pour les champs “SECONDARY_NAV_ICON” et “SECONDARY_NAV_LINK”

Onglet “SPECIAL”

Vous pou­vez ici attribuer des datas per­son­nal­isées (CUSTOM_DATA)  à votre scène.
pour en savoir plus sur les CUSTOM_DATA lisez l’ar­ti­cle per­son­nalis­er mon pro­jet grâce au CSS

Quelques exemples de code pour personnaliser son template “QR Code”