Afficher la personnalisation par-dessus une page

 

Lorsque vous créez une personnalisation, trois choix s’offrent à vous : afficher la personnalisation dans le contenu de votre page, par-dessus votre page ou via un email. Afficher votre personnalisatoin par-dessus le contenu de votre page vous permet de créer des popins ou des sticky blocks. 

Nous détaillerons dans cet article l’affichage d’une personnalisation par-dessus votre page. Pour voir comment afficher une personnalisation dans le contenu de votre page, rendez-vous sur l’article dédié

Popin

La popin est une fenêtre qui s’ouvre à l’intérieur de votre page web, par-dessus son contenu. Elle peut apparaître à l’ouverture de la page ou après un évènement (comme par exemple un clic sur le bouton « Ajouter au panier »).

Choisissez dans le menu déroulant par quelle méthode vous souhaitez créer votre popin.

  • A partir d’une image :
  • A partir d’un template vierge
  • A partir de code HTML
  • A partir de Target2Sell

Créer une popin à partir d’une image

Sélection de l'image

Vous pouvez  utiliser une image comme popin sur votre site. Pour cela, choisissez l’option « A partir d’une image ».

Pour sélectionner une image, tapez son URL dans le champ correspondant, ou bien importez un fichier depuis votre ordinateur. 

Pour supprimer une image sélectionnée, cliquez sur le bouton « Supprimer » qui apparait lorsque vous passez votre souris sur l’image.

Emplacement de la popin sur la page

Par défaut,  la popin est située au centre de la page, mais vous pouvez choisir son emplacement en cliquant sur l’une des flèches du schéma. Vous pouvez également régler sa position précisément sur l’axe des X (horizontal) ou des Y (vertical) en cliquant sur « Avancé ».

Taille de l'image

Si votre image est déjà au format souhaité, sélectionnez la case « Conforme à l’image source ». En revanche, si vous souhaitez redimensionner l’image, cochez la case « Redimensionner l’image source ». Des champs pour régler la largeur et la hauteur de l’image apparaitront. Attention, ces deux champs sont indépendants : pour redimensionner une image homothétiquement, prenez garde à les remplir correctement.

Attention : si vous cochez la case « Redimensionner l’image source » sans en modifier les dimensions, la personnalisation ne s’activera pas.

Afficher pour les appareils

Vous pouvez choisir en quelques clics sur quels appareils vous souhaitez afficher ou non votre personnalisation. Par défaut, tous les types d’appareils sont sélectionnés. Cliquez sur l’appareil de votre choix pour le désélectionner.

Lorsque vous désélectionnez un appareil, une ligne apparait en dessous pour vous permettre d’ajouter une image adaptée. Si vous n’ajoutez pas d’image adaptée, les visiteurs utilisant ce type d’appareil ne seront pas inclus dans la personnalisation.

Note : vous pouvez également inclure ou exclure des appareils lors de la création de votre segment.

Effet d'animation pour votre popin

Vous pouvez ajouter plusieurs effets d’animation à votre popin : slider, fondu, zoom in, zoom out, vibreur. Vous pouvez également paramétrer à quel moment l’animation sera déclenchée (à l’ouverture, la fermeture ou les deux) ainsi que le point de départ de l’animation pour le slider.

Attention, pour que les personnalisations avec effets d’animation fonctionnent vous devez impérativement cocher la case « Autoriser l’injection de jQuery » dans vos options de configuration, accessibles depuis la page « Préférences ».

Pour cela, rendez-vous sur le « Module de personnalisation » de la partie « Configuration ». Si vous rencontrez des difficultés à trouver la case à cocher, vous pouvez consulter l’article Comment autoriser l’injection de jQuery ?

URL de redirection au clic

Si vous le souhaitez, vous pouvez ajouter un lien sur votre popin. Pour cela, il suffit d’indiquer le lien dans le champ correspondant.

L'URL que vous renseignez s'ouvrira dans une nouvelle fenêtre si le visiteur clique quelque part sur votre popin.

Options

Deux options sont disponibles et cochées par défaut, mais vous pouvez les désactiver si vous le souhaitez :

  • Appliquer un fond semi-transparent derrière : votre site, qui se trouvera en arrière-plan, sera assombri, seule la popin sera ainsi mise en valeur.
  • Fermer la popin si l’utilisateur clique en dehors : permet à l’utilisateur de fermer la popin soit en cliquant en dehors de celle-ci soit en cliquant sur la croix de fermeture. Si l’option est désactivée, l’utilisateur devra cliquer sur la croix de fermeture.

Créer une popin à partir d’un template vierge

Type de template

Kameleoon vous propose deux types de template de base, les deux composés de texte et d’une image. Sélectionnez le template de votre choix en cliquant dessus.

Sélection de l'image

Pour sélectionner une image, tapez son URL dans le champ correspondant, ou bien importez un fichier depuis votre ordinateur.

Pour supprimer l’image sélectionnée, cliquez sur le bouton « Supprimer » qui apparait lorsque vous passez votre souris sur l’image.

Texte de votre popin

Saisissez votre texte dans le champ indiqué. Vous pouvez configurer la taille et la couleur de la police, ainsi que la couleur d’arrière-plan.

Emplacement de la popin sur la page

Par défaut,  la popin est située au centre de la page, mais vous pouvez choisir son emplacement en cliquant sur l’une des flèches du schéma. Vous pouvez également régler sa position précisément sur l’axe des X (horizontal) ou des Y (vertical) en cliquant sur « Avancé ».

Taille de l'image

Si votre image est déjà au format souhaité, sélectionnez la case « Conforme à l’image source ». En revanche, si vous souhaitez redimensionner l’image, cochez la case « Redimensionner l’image source ». Des champs pour régler la largeur et la hauteur de l’image apparaitront. Attention, ces deux champs sont indépendants. Pour redimensionner une image homothétiquement, prenez garde à les remplir correctement.

Attention : si vous cochez la case « Redimensionner l’image source » sans en modifier les dimensions, la personnalisation ne s’activera pas.

Afficher pour les appareils

Vous pouvez choisir en quelques clics sur quels appareils vous souhaitez afficher ou non votre personnalisation. Par défaut, tous les types d’appareils sont sélectionnés. Cliquez sur l’appareil de votre choix pour le désélectionner.

Lorsque vous désélectionnez un appareil, une ligne apparait en dessous pour vous permettre d’ajouter une image adaptée. Si vous n’ajoutez pas d’image adaptée, les visiteurs utilisant ce type d’appareil ne seront pas inclus dans la personnalisation.

Note : vous pouvez également inclure ou exclure des appareils lors de la création de votre segment.

Effets d'animation pour votre popin

Vous pouvez ajouter plusieurs effets d’animation à votre popin : slider, fondu, zoom in, zoom out, vibreur. Vous pouvez également paramétrer à quel moment l’animation sera déclenchée (à l’ouverture, la fermeture ou les deux) ainsi que le point de départ de l’animation pour le slider.

Attention, pour que les personnalisations avec effets d’animation fonctionnent vous devez impérativement cocher la case « Autoriser l’injection de jQuery » dans vos options de configuration, accessibles depuis la page « Préférences ».

Pour cela, rendez-vous sur le « Module de personnalisation » de la partie « Configuration ». Si vous rencontrez des difficultés à trouver la case à cocher, vous pouvez consulter l’article Comment autoriser l’injection de jQuery ?

URL de redirection au clic

Si vous le souhaitez, vous pouvez ajouter un lien sur votre popin. Pour cela, il suffit d’indiquer le lien dans le champ correspondant.

L'URL que vous renseignez s'ouvrira dans une nouvelle fenêtre si le visiteur clique quelque part sur votre popin.

Options

Deux options sont disponibles, elles sont cochées par défaut mais peuvent être désactivées si vous le souhaitez :

  • Appliquer un fond semi-transparent derrière : votre site, qui se trouvera en arrière-plan, sera assombri, seule la popin sera ainsi mise en valeur.
  • Fermer la popin si l’utilisateur clique en dehors : permet à l’utilisateur de fermer la popin soit en cliquant en dehors de celle-ci soit en cliquant sur la croix de fermeture. Si l’option est désactivée, l’utilisateur devra cliquer sur la croix de fermeture.

Créer une popin à partir de code HTML

Votre code HTML

Tapez ou collez le code HTML de votre popin dans le champ indiqué.

Emplacement de la popin sur la page

Par défaut,  la popin est située au centre de la page, mais vous pouvez choisir son emplacement en cliquant sur l’une des flèches du schéma. Vous pouvez également régler sa position précisément sur l’axe des X (horizontal) ou des Y (vertical) en cliquant sur « Avancé ».

Effets d'animation pour votre popin

Vous pouvez ajouter plusieurs effets d’animation à votre popin : slider, fondu, zoom in, zoom out, vibreur. Vous pouvez également paramétrer à quel moment l’animation sera déclenchée (à l’ouverture, la fermeture ou les deux) ainsi que le point de départ de l’animation pour le slider.

Attention, pour que les personnalisations avec effets d’animation fonctionnent vous devez impérativement cocher la case « Autoriser l’injection de jQuery » dans vos options de configuration, accessibles depuis la page « Préférences ».

Pour cela, rendez-vous sur le « Module de personnalisation » de la partie « Configuration ». Si vous rencontrez des difficultés à trouver la case à cocher, vous pouvez consulter l’article Comment autoriser l’injection de jQuery ?

URL de redirection au clic

Si vous le souhaitez, vous pouvez ajouter un lien sur votre popin. Pour cela, il suffit d’indiquer le lien dans le champ correspondant.

L'URL que vous renseignez s'ouvrira dans une nouvelle fenêtre si le visiteur clique quelque part sur votre popin.

Options

Deux options sont disponibles, elles sont cochées par défaut mais peuvent être désactivées si vous le souhaitez :

  • Appliquer un fond semi-transparent derrière : votre site, qui se trouvera en arrière-plan, sera assombri, seule la popin sera ainsi mise en valeur.
  • Fermer la popin si l’utilisateur clique en dehors : permet à l’utilisateur de fermer la popin soit en cliquant en dehors de celle-ci soit en cliquant sur la croix de fermeture. Si l’option est désactivée, l’utilisateur devra cliquer sur la croix de fermeture.

Créer une popin à partir de Target2Sell

Si vous souhaitez utiliser Target2Sell, il vous suffit de préciser votre identifiant. Une fois votre identifiant renseigné, c’est target2sell qui choisira quel produit du catalogue mettre en avant dans l’emplacement spécifié.

Emplacement de la popin sur la page

Par défaut,  la popin est située au centre de la page, mais vous pouvez choisir son emplacement en cliquant sur l’une des flèches du schéma. Vous pouvez également régler sa position précisément sur l’axe des X (horizontal) ou des Y (vertical) en cliquant sur « Avancé ».

Effets d'animation pour votre popin

Vous pouvez ajouter plusieurs effets d’animation à votre popin : slider, fondu, zoom in, zoom out, vibreur. Vous pouvez également paramétrer à quel moment l’animation sera déclenchée (à l’ouverture, la fermeture ou les deux) ainsi que le point de départ de l’animation pour le slider.

Attention, pour que les personnalisations avec effets d’animation fonctionnent vous devez impérativement cocher la case « Autoriser l’injection de jQuery » dans vos options de configuration, accessibles depuis la page « Préférences ».

Pour cela, rendez-vous sur le « Module de personnalisation » de la partie « Configuration ». Si vous rencontrez des difficultés à trouver la case à cocher, vous pouvez consulter l’article Comment autoriser l’injection de jQuery ?

URL de redirection au clic

Si vous le souhaitez, vous pouvez ajouter un lien sur votre popin. Pour cela, il suffit d’indiquer le lien dans le champ correspondant.

L'URL que vous renseignez s'ouvrira dans une nouvelle fenêtre si le visiteur clique quelque part sur votre popin.

Options

Deux options sont disponibles, elles sont cochées par défaut mais peuvent être désactivées si vous le souhaitez :

  • Appliquer un fond semi-transparent derrière : votre site, qui se trouvera en arrière-plan, sera assombri, seule la popin sera ainsi mise en valeur.
  • Fermer la popin si l’utilisateur clique en dehors : permet à l’utilisateur de fermer la popin soit en cliquant en dehors de celle-ci soit en cliquant sur la croix de fermeture. Si l’option est désactivée, l’utilisateur devra cliquer sur la croix de fermeture.

Sticky block

Un sticky block est une image qui s’affiche sur toute la largeur de votre page, généralement positionnée dans le header ou le footer.

Choisissez dans le menu déroulant par quelle méthode vous souhaitez créer votre sticky block :

  • A partir d’une image
  • A partir de code HTML
  • A partir de Target2Sell

Créer un sticky block à partir d’une image

Sélection de l'image

Vous pouvez  utiliser une image comme sticky block sur votre site. Pour cela, choisissez l’option « A partir d’une image ».

Pour sélectionner une image, tapez son URL dans le champ correspondant, ou bien importez un fichier depuis votre ordinateur.

Attention, le sticky block étant un format qui prend toute la largeur de la page, la largeur l'image sélectionnée occupera automatiquement la largeur de votre page et la hauteur sera automatiquement adaptée. Pour éviter d’avoir une image qui occupe trop de place en hauteur, optez pour un format qui fait la largeur de votre page et moins de 100 pixels de hauteur.

Pour supprimer une image sélectionnée, cliquez sur le bouton « Supprimer » qui apparait lorsque vous passez votre souris sur l’image.

Positionnement du sticky block

Trois options s’offrent à vous :

  • Dans le header
  • Dans le footer
  • A un emplacement précis sur l’axe X ou Y

Afficher pour les appareils

Vous pouvez choisir en quelques clics sur quels appareils vous souhaitez afficher ou non votre personnalisation. Par défaut, tous les types d’appareils sont sélectionnés. Cliquez sur l’appareil de votre choix pour le désélectionner.

Lorsque vous désélectionnez un appareil, une ligne apparait en dessous pour vous permettre d’ajouter une image adaptée. Si vous n’ajoutez pas d’image adaptée, les visiteurs utilisant ce type d’appareil ne seront pas inclus dans la personnalisation.

Note : vous pouvez également inclure ou exclure des appareils lors de la création de votre segment.

URL de redirection au clic

Si vous le souhaitez, vous pouvez ajouter un lien sur votre sticky block. Pour cela, il suffit d’indiquer le lien dans le champ correspondant.

L'URL que vous renseignez s'ouvrira dans une nouvelle fenêtre si le visiteur clique quelque part sur votre sticky block.

Options

Deux options sont disponibles, elles sont désactivées par défaut mais peuvent être activées si vous le souhaitez :

  • Faire apparaître le sticky block au scroll : le sticky block n’apparaîtra qu’au moment où l’utilisateur fera défiler la page.
  • Décaler le contenu pour éviter la superposition : le sticky block ne sera pas positionné au-dessus de votre contenu. Par exemple, si vous utilisez un sticky block en header, le haut de votre page sera décalé de la hauteur du sticky block afin d’être visible.

Créer un sticky block à partir de code HTML

Votre code HTML

Tapez ou collez le code HTML de votre popin dans le champ indiqué.

Positionnement du sticky block

Trois options s’offrent à vous :

  • Dans le header
  • Dans le footer
  • A un emplacement précis sur l’axe X ou Y

URL de redirection au clic

Si vous le souhaitez, vous pouvez ajouter un lien sur votre sticky block. Pour cela, il suffit d’indiquer le lien dans le champ correspondant.

L'URL que vous renseignez s'ouvrira dans une nouvelle fenêtre si le visiteur clique quelque part sur votre sticky block.

Options

Deux options sont disponibles, elles sont désactivées par défaut mais peuvent être activées si vous le souhaitez :

  • Faire apparaître le sticky block au scroll : le sticky block n’apparaîtra qu’au moment où l’utilisateur fera défiler la page.
  • Décaler le contenu pour éviter la superposition : le sticky block ne sera pas positionné au-dessus de votre contenu. Par exemple, si vous utilisez un sticky block en header, le haut de votre page sera décalé de la hauteur du sticky block afin d’être visible.

Créer un sticky block à partir de Target2Sell

Si vous souhaitez utiliser Target2Sell, il vous suffit de préciser votre identifiant. Une fois votre identifiant renseigné, c’est target2sell qui choisira quel produit du catalogue mettre en avant dans l’emplacement spécifié.

Positionnement du sticky block

Trois options s’offrent à vous :

  • Dans le header
  • Dans le footer
  • A un emplacement précis sur l’axe X ou Y

URL de redirection au clic

Si vous le souhaitez, vous pouvez ajouter un lien sur votre sticky block. Pour cela, il suffit d’indiquer le lien dans le champ correspondant.

L'URL que vous renseignez s'ouvrira dans une nouvelle fenêtre si le visiteur clique quelque part sur votre sticky block.

Options

Deux options sont disponibles, elles sont désactivées par défaut mais peuvent être activées si vous le souhaitez :

  • Faire apparaître le sticky block au scroll : le sticky block n’apparaîtra qu’au moment où l’utilisateur fera défiler la page.
  • Décaler le contenu pour éviter la superposition : le sticky block ne sera pas positionné au-dessus de votre contenu. Par exemple, si vous utilisez un sticky block en header, le haut de votre page sera décalé de la hauteur du sticky block afin d’être visible.

Widgets

Différents widgets sont à votre disposition dans le cadre de vos personnalisations.

Chaque Widget est accompagné d'un court texte explicatif qui vous présente sa fonction. Cliquez sur le bouton « En savoir plus » pour afficher le texte complet.

Pour sélectionner un widget, cliquez sur le bouton « Ajouter » placé en bas à droite de la case du widget que vous souhaitez sélectionner.

Lorsque vous avez sélectionné un widget, vous pouvez le désélectionner en cliquant sur « Widgets » dans le chemin en haut de votre écran.

Pour en savoir plus sur les différents widgets disponibles et comment les configurer, référrez-vous à notre article détaillé sur les widgets.

Vous avez d’autres questions ? Envoyer une demande
Réalisé par Zendesk