Outil de coreg Mykodial : place à la rencontre gay !

coreg-mykodial

Déjà bien présent sur vos sites de rencontre hétéro, je ne dois plus vous présenter l’outil et ses avantages 🙂
Cet article est là pour vous présenter la co-registration « version » Mykodial : intégrez cet outil à vos sites de petites annonces gay et commencez à maximiser la monétisation de ces derniers !

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 celui 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 Mykodial

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écessaires.

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(27, 58, 88, 0.7)"
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(27, 58, 88, 0.7)" 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(27, 58, 88, 0.7)" 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 🙂