Mise a jour des outils de co-registration

coreg

Vous êtes nombreux à utiliser ces outils mis à votre disposition et vous avez raison de les utiliser !
Cet outil vous permet d’améliorer l’expérience utilisateur, et donc, votre transformation en gardant l’identité visuelle de votre site tout au long de sa visite. De plus ces outils, étant hébergé sur votre site, passent les filtres AdBlock sans aucun souci.

Pour rappel, la première version se trouve ici : La co-registration, un webservice et des possibilités infinies !

Voici les différents outils disponibles :

Le mailcatcher :

Mailcatcher

Simple et rapide : demandez le mail de votre visiteur pour l’inscrire sur notre produit de rencontre !

 

Démonstration : Voir la démonstration

Le script : Télécharger le script

Le landing :

Landing

Plus complet que son prédécesseur, ce dernier se rapproche d’un formulaire d’inscription classique, tout en reprenant la photo du profil cliqué !

 

Démonstration : Voir la démonstration

Le script : Télécharger le script

Le fake formulaire de contact :

Fake formulaire de contact

Quoi de plus normal sur un site que de proposer à son visiteur de contacter celle qui a posté sa petite annonce ?

 

Démonstration : Voir la démonstration

Le script : Télécharger le script

Le formulaire d’inscription :

Inscription

A intégrer en dur ou en pop DHTML, proposez à votre visiteur de s »inscrire afin de profiter de toutes les fonctionnalités du site.

 

Démonstration : Voir la démonstration

Le script : Télécharger le script

Pour vous aider à mieux visualiser les outils dans leur contexte, n’hésitez pas à vous rendre sur la page de démonstration : Démonstration des outils de co-registration

Envie de placer cet outil dans une popup DHTML ?

Sur ce petit tutoriel, j’utilise le plugin JQuery « VenoBox ». Mais n’hésitez pas à utiliser votre plugin jQuery favori : ce n’est qu’un plugin parmi tant d’autres 🙂

1. Inclure jQuery à ma page

Si ce n’est déjà fait, placez cette ligne avant la fermeture du </body> :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

2. Téléchargez les fichiers nécéssaires.

Pour ce faire, voici la démarche:
       1. Rendez-vous sur cette page : https://github.com/nicolafranchini/VenoBox
       2. Cliquer sur le lien « Download ZIP » afin de récupérer les fichiers.

C’est le dossier « venobox » se trouvant dans le dossier « VenoBox-master » qui nous intéresse et que nous allons placer sur le FTP..

Dans la suite de ce tutoriel, nous partons du principe que tout se trouve dans ce dossier : /media/js/venobox/.

3. Intégrer le plugin à votre page.

Placez entre <head> et </head> cette ligne :

<link rel="stylesheet" href="/media/js/venobox/venobox.css" type="text/css" media="screen">

Et celle-ci juste avant la fermeture </body> (mais après jQuery) :

<script type="text/javascript" src="/media/js/venobox/venobox.min.js"></script>

4. Modifier les liens vers nos outils.

VenoBox utilise une classe CSS pour savoir quel lien il doit ouvrir.

Certaines DHTML ci-dessus étant assez grande, il est préférable de les ouvrir dans une nouvelle fenêtre sur téléphone mobile. C’est pourquoi, on crée deux classes CSS :

  1. class="modalBig" pour les grandes popup’s DHTML.
  2. class="modalLight" pour les petites popup’s DHTML.

On dit ensuite à VenoBox d’ouvrir les liens dans une iframe : data-type="iframe"

Et pour terminer, on définit la couleur de fond (overlay) à utiliser en ajoutant l’attribut suivant : data-overlay="rgba(202,45,164, 0.8)"
Pour choisir une autre couleur adaptée à votre site : Hex 2 RGBA Color Calculator

Votre lien sera in fine de ce format :

» Pour une grande popup DHTML (landing, formulaire de contact, formulaire d’inscription) :
<a class="modalBig" href="/coreg/contact/index.php" target="_blank" data-overlay="rgba(202,45,164, 0.8)" data-type="iframe" title="Contactez la !">Texte du lien</a>

» Pour une petite popup DHTML (mailcatcher) :
<a class="modalLight" href="/coreg/contact/index.php" target="_blank" data-overlay="rgba(202,45,164, 0.8)" data-type="iframe" title="Contactez la !">Texte du lien</a>

5. Le code JS qui va mettre ça en action.

Placez ce code JS en bas de page (juste avant la fermeture du </body>) :

Normalement, tout devrait être en état de marche. Si ce n’est pas le cas, contactez nous qu’on voit ce qui se passe 🙂