Comment faire apparaître un bouton de paiement à la fin d’une vidéo

jqueryAujourd’hui, retour à la technique. Enfin rien de bien méchant, je vous rassure tout de suite. Vous pouvez vous détendre. 🙂

Et vous réjouir aussi, parce que je crois savoir que cette petite astuce va faire des heureux.

Comme l’indique le titre de cet article, je vais vous dévoiler comment faire pour qu’un élément (bouton de paiement ou formulaire d’inscription ou autre) apparaisse sur vos pages Web de manière différée, comme à la fin d’une vidéo par exemple.

Ça fait très longtemps que je possède le script qui permet de faire ça, tout simplement parce qu’à l’époque où certains gros marketers américains ont commencé à utiliser ce procédé, le script a été très largement diffusé. Je l’avais alors téléchargé et il est resté depuis dans mon disque dur à prendre la poussière.

Et c’est le commentaire fait par un des membres du Club Stratégie sur le blog de Thierry Dubois, MyIdées, qui m’a donné l’idée de faire un petit sujet là-dessus.

Du coup, j’ai aussi retrouvé la source du script dont je vais vous donner la traduction dans un moment… avec une version qui permet de programmer également la disparition de l’élément que vous aurez fait apparaître.

Avec l’article d’aujourd’hui, vous allez donc apprendre à insérer cette fonctionnalité sur des pages Web. C’est quelque chose que vous pourrez faire aussi sur vos blogs WordPress via un petit plugin que j’ai dans mes réserves. Sympa, non ? Mais attention : ça n’est pas donné à tout le monde… je vous explique ça un peu plus bas. 😉

Vous aurez donc la possibilité de faire apparaître n’importe quoi (un bouton de paiement, un formulaire d’inscription, du texte…), là où vous voulez, exactement quand vous voulez, il suffit de bien prévoir le temps avant affichage.

Alors avant d’attaquer la technique, vous pourriez être en train de vous demander à quoi peut bien servir cette petite stratégie ?

En fait, il y a énormément de situations où vous aurez peut-être envie d’utiliser cette méthode : tout simplement lorsque vous voulez que vos visiteurs n’aient pas accès tout de suite à tous les éléments de votre page, histoire de les garder bien concentrés sur ce que vous avez à leur transmettre…

Un formulaire d’inscription, un bouton de paiement, vous aurez peut-être envie de les voir s’afficher seulement après que vos visiteurs aient lu votre texte de vente, ou après qu’ils aient visionné votre vidéo…

Quant à faire disparaître un élément au bout d’un certain temps, là encore, je vous laisse imaginer la quantité d’applications possibles… 😉

Alors pour faire les choses comme il faut, j’ai réalisé une courte vidéo qui vous explique exactement comment faire. Mon petit plugin spécial se charge tout seul d’attendre que vous ayez lu tout ce qui précède…

Ça devrait y être… c’est bon ? Vous êtes là ? Alors allons-y…

***

Voici donc la vidéo qui vous explique quoi faire sur vos pages HTML, et juste en-dessous, vous trouverez le fichier qui contient les codes à insérer dans le code source de vos pages pour obtenir cet effet d’affichage différé.

***

***

Et voilà ! Vous avez vu maintenant à quel point c’est facile à faire sur vos pages HTML ?

Alors allez-y, voici le script en question : cliquez ici pour le télécharger.

Maintenant, si vous souhaitez modifier la qualité de l’effet d’apparition de base, libre à vous de chercher, allez-y, amusez-vous, vous trouverez de l’inspiration ici : http://jquery.developpeur-web2.com/.

Si vous trouvez une combinaison d’effets intéressants, soyez sympa, revenez ici pour partager avec nous ! 😉

Enfin, je vous disais qu’il était possible de faire ça dans WordPress aussi (seulement l’apparition différée et pas la disparition). Je confirme, j’ai un petit plugin qui fait ça très bien. Vous l’avez d’ailleurs vu à l’oeuvre tout à l’heure.

Je l’offre à mes membres, il est déjà en place dans l’espace qui leur est réservé. Si vous n’êtes pas encore inscrit, c’est peut-être le moment de nous rejoindre ?… Je vous laisse découvrir tous vos avantages en tant que membre dans la barre latérale… 🙂

***

separator

  1. ThierryDubois
    ThierryDubois08-03-2012

    Bonjour Alexandra,

    Merci pour cet article explicite.
    Il devrait aider l’adhérent en question !

    Amicalement
    ThierryDubois Mon dernier article… Une formatrice Web rejoint le Club StratégieMy Profile

    • Alexandra
      Alexandra08-03-2012

      Hello Thierry, 🙂

      oui, pour ton adhérent, j’espère qu’il aura l’idée de passer !

      Et pour tout le monde, eh bien j’étais ravie de mettre ce script à disposition étant donné qu’il a beaucoup circulé au moment où un gros marketer américain a commencé à l’utiliser avec moult statistiques et résultats de tests sur les taux de conversion… 😉

      C’est juste un tout petit truc de rien du tout, mais ça fait son effet !

      Amicalement,
      Alexandra

  2. MarieEve
    MarieEve09-17-2012

    Salut Alexandra,

    Je pense que je vais faire une annonce sur mon blog pour rediriger mes visiteurs ici et leur faire connaître ce petit script.

    Tellement pratique quand on ne sait pas coder!

    A++
    MarieEve Mon dernier article… Démonstration vidéo: ma façon d’utiliser une règle à pixelMy Profile

    • Alexandra
      Alexandra09-17-2012

      Hello Marie-Eve, 🙂

      alors ça, oui, très sympa comme idée ! Redirige… redirige… 😉

      Mais oui, tu sais bien, il y a comme ça des foultitudes de petits scripts gratuits… faut prendre le temps de fouiller. Moi c’est juste le temps de transmettre qui me manque !

      A bientôt, amicalement,
      Alexandra

  3. jeanloup
    jeanloup11-19-2012

    Bonjour,

    Vraiment génial votre plug WP, rien à dire, parfait.

    Mais j’ai quand même un souci, si je veux faire apparaitre « un bouton » qui est un short-code

    Exemple : [eStore_add_to_cart id=1]

    Il fait apparaitre le short-code mais pas le bouton lier !

    Auriez vous une excellente idée pour moi ?
    Merci d’avance
    JL

    • Alexandra
      Alexandra11-19-2012

      Bonjour Jean-Loup et merci de votre visite,

      ah oui, en effet, le problème vient du fait que votre bouton d’achat est lui-même un shortcode qui sera donc encadré par les shortcodes du plugin. Du coup, ça crée la confusion, si je peux dire.

      Sur le plan technique, je n’ai aucune idée là, comme ça. Éventuellement, dès que j’aurai une minute, je pourrai demander au concepteur de plancher là-dessus, ça sera certainement bienvenu pour d’autres personnes… si c’est possible techniquement parlant !

      Sinon, vous savez ce que je fais dans ce genre de cas ? Je ruse. 🙂

      Mais oui, regardez : si par exemple vous encadrez le shortcode de votre bouton avec des éléments textuels (genre *** ou !!! ou peu importe) que vous masquez en blanc, et que vous encadrez le tout par les shortcodes du plugin, c’est réglé.

      Ça pourra donner quelque chose comme : [shortcode plugin]***[shortcode bouton]***[/shortcode plugin]. Vous saisissez ? 😉

      Dites-nous si ça fonctionne, d’accord ?

      Bonne fin de journée, amicalement,
      Alexandra

    • Alexandra
      Alexandra11-23-2012

      Bonjour Jean-Loup,

      j’ai bien reçu votre email et je souhaitais vous répondre, mais – c’est un comble ! – je ne le retrouve plus !

      Bon… si j’ai bien compris, la solution que je vous suggérais de tester ne fonctionne pas… bigre ! Je n’ai malheureusement pas du tout le temps en ce moment de fouiller et de tester d’autres choses, mais ça m’intéresse quand même de trouver une solution.

      Dès que je peux, je mets le nez dedans et par la même occasion, je vais demander au concepteur ce qu’on peut faire.

      On se tient au courant ? 🙂

      Amicalement,
      Alexandra
      Alexandra Mon dernier article… Le bon plan du mois de novembreMy Profile

Laisser une réponse

CommentLuv badge

Ce blog utilise CommentLuv Premium qui vous autorise à associer des mots-clés à votre nom si vous avez effectué 3 commentaires approuvés. Utilisez votre vrai nom puis @ et vos mots-clés (maximum de 5).

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.