Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Menu

  • Action sur le module
    1. Personnaliser le favicon sur une opération
  • Mode de connexion


    Info
    titleSommaire

    Table of Contents



    Dans Paramétrage > Design du module, vous pouvez complètement modifier l'apparence et les actions de votre design du module grâce au JavaScript personnalisé.

    Voici quelques exemples de codes JavaScript les plus utilisés par nos clients.


    Supprimer le placeholder de la connexion par email

  • Acquisition de donnée
  • Incentive
  • Partage
  • Vous pouvez modifier certains affichages sur les opérations marketing grâce au Javascript. Pour cela, il faut aller dans la modification des designs.

    Attention, cette fonctionnalité est réservé à certains niveaux d’abonnement. Vous pouvez y accéder dans "Paramétrage > Design du module > Choisissez le design à modifier > CSS Personnalisé". 

    AnchorTitre_unTitre_un

    1/ Action sur le module

    AnchorTitre1_aTitre1_a

    a/ Personnaliser le favicon sur une opération


    Image Removed

    Image Removed

     

     

     

    Code Block
    languagejs
    themeEmacs
    $(document).ready(function () {
      if ($('.step-sbauth').length > 0) {
      	  $('.input-email[name="newsubs"]').attr('placeholder', '');
      }
    });



    Image Added

    Image Added



    Personnaliser le titre de l'onglet du navigateur


    Code Block
    languagejs
    themeEmacs
    document.title = 'Le titre du module';



    Ajouter un contrôle d'âge

    Code Block
    languagejs
    themeEmacs
    $(function() {
    
       var link = document.createElement('link');
        link.type = 'image/x-icon';
        link.rel = 'shortcut icon';
        link.href = 'http://www.stackoverflow.com/favicon.ico';
        document.getElementsByTagName('head')[0].appendChild(link);
    }());

     

     

    AnchorTitre_deuxTitre_deux

    2/ Mode de connexion

    AnchorTitre2_aTitre2_a

    a/ Supprimer le placeholder de la connexion par email

     

     

    Image Removed

    Image Removed

    if($("#popup").hasClass("step-auth") ) {
    
      $(".right-side").css("display","none");
    
      $("#popup").append("<div id=\"modal-age-verification\" class=\"modal-consent hide\" style=\"display:none;\"><div class=\"modal-body\" style=\"text-align:center;\"><div style=\"font-size: 1.17em;line-height: 22px;\">Pour continuer, vous devez être âgé de 18 ans ou plus. <br /> Veuillez confirmer votre âge.</div><div style=\"text-align: center;padding: 20px 15px 0 15px;display: flex;justify-content: space-evenly;\"><button class=\"btn btn-large btn-modal btn-no\" type=\"button\" >J'ai moins de 18 ans</button><button class=\"btn btn-large btn-modal btn-yes\" type=\"button\">J'ai 18 ans ou plus</button></div></div><div class=\"modal-footer\"></div></div>");
    
      // Instantiate new modal
      var modal = new Custombox.modal({
        content: {
          effect: 'fadein',
          target: '#modal-age-verification',
          container: "#popup",
          close: false
        },
        overlay: {
          close: false
        }
      });
    
      // Open
      modal.open();
    
      $(".btn-yes").live ('click', function() {
        Custombox.modal.close();
        $(".right-side").css("display","table-cell");
      });
    
        $( ".btn-no" ).live("click", function() {
          Custombox.modal.close();
      });
      
      }
      
    });



    Remontées d'informations sur Facebook, Google Analytics...

    Si vous souhaitez obtenir des informations supplémentaires sur certains modules, vous pouvez exécuter des scripts sur la page de confirmation du module par exemple.

    Pour cela, intégrez le code de votre outil dans le design de votre module, section JavaScript personnalisé en utilisant le code ci-dessous :

    Code Block
    languagejs
    themeEmacs
    $( document ).ready(function () {
      	if ($("body[data-step='.step-sbauththanks']").length > 0) {
      	  $('.input-email[name="newsubs"]').attr('placeholder', '');
      }
    });
    AnchorTitre_troisTitre_trois

    3/ Acquisition de données

     

     

    AnchorTitre_quatreTitre_quatre

    4/ Incentive

     

     

    AnchorTitre_cinqTitre_cinq

    5/ Partage

     

     
      	// Code à exécuter
    	}
    );



    Consulter les autres documentations sur le design du module

    Page Tree
    rootDesign du module
    searchBoxtrue