Libérez votre créativité avec l'IA : générez du code HTML unique et boostez l'engagement de vos prochaines campagnes.
3 idées de campagnes personnalisées avec du code HTML
1. Luxury Card (carte 3D)
La matière et le prestige au bout des doigts ! Une carte qui s'incline en 3D en suivant précisément le curseur, traversée par un reflet métallique glissant.
Les avantages pour votre campagne :
Illusion de matérialité : recrée le poids et la texture d'un objet physique exclusif directement sur l'écran.
Interaction hypnotique : le suivi du mouvement déclenche un effet immédiat qui pousse à jouer avec l'élément.
Valorisation de la dotation : transforme un simple visuel de lot ou un statut VIP en un véritable objet palpable.
Design statutaire : le reflet dynamique rappelle les codes de l'horlogerie ou des cartes bancaires très haut de gamme.
2. Effet lampe torche
Le mystère comme levier d'engagement. Une zone de jeu plongée dans la pénombre que l'utilisateur doit explorer à l'aide d'un halo lumineux attaché à son curseur.
Les avantages pour votre campagne :
Curiosité piquée à vif : l'instinct d'exploration pousse l'utilisateur à balayer l'écran pour découvrir le secret caché.
Focus absolu : isole l'attention sur un message, un produit ou un code promo, en éliminant toute distraction.
Temps passé décuplé : la mécanique de recherche retient le joueur beaucoup plus longtemps sur votre campagne.
Théâtralisation du gain : le moment précis où la lumière révèle la récompense crée un pic émotionnel fort.
3. Image en lévitation avec effet Glow
Le magnétisme visuel pour sublimer vos produits. Un visuel qui flotte doucement en apesanteur, sublimé par un halo lumineux dynamique qui réagit et s'intensifie au survol.
Les avantages pour votre campagne :
Mise en avant spectaculaire : isole et starifie le produit phare ou la dotation au centre de l'attention de l'utilisateur.
Sensation de magie : l'animation organique et fluide capte l'œil et retient l'utilisateur sur la page de jeu.
Engagement au survol : l'effet "glow" interactif incite naturellement à chercher le contact avec l'élément.
Design onirique : la lumière ajoute une dimension précieuse, parfaite pour l'univers du parfum ou du soin.
Processus pour obtenir des animations
Phase 1 : Génération et vérification du code (via un Agent IA)
Générez le code initial en utilisant le modèle de prompt suivant dans un agent IA comme Gemini ou ChatGPT : « Dans le cadre d'un widget html, génère moi un code html qui anime une image < description de l'animation souhaitée > ».
Faites vérifier le code généré par Gemini en lui soumettant ce second prompt pour vous assurer qu'il réponde aux contraintes techniques : « Est-ce que tu peux vérifier que le code : > code html < respecte les contraintes suivantes :
Le code doit être compatible avec les navigateurs modernes (Chrome, Safari, Firefox, Edge) et mobile.
Le code doit être autonome (pas de dépendances externes, pas de CDN).
Le code doit fonctionner dans un environnement sandboxé (widget).
Ne pas utiliser de framework (pas de React, Vue, etc.).
Utiliser uniquement du JavaScript vanilla. ».
Phase 2 : Intégration du code dans la plateforme
Une fois votre code généré et validé, voici les étapes pour l'intégrer dans votre campagne :
Exportez le visuel qui sera animé, en le séparant du fond.
Uploadez l'image dans la plateforme Adictiz via le menu de gauche dans l'onglet Médias > Mes images.
Ajoutez l'image dans la zone de preview.
Récupérez le lien de l'image (il est recommandé d'utiliser une extension Google Chrome pour faciliter cette action).
Supprimez l'image de la zone de preview.
Ajoutez un widget "Bloc HTML/JS" depuis le menu Widgets > Divers.
Intégrez le code que vous avez généré à l'étape 1 directement dans le widget.
Renseignez la source de l'image dans le code en remplaçant la mention "url_de_votre_image.jpg" par le lien de l'image récupéré à l'étape 4.
Ajustez manuellement les dimensions du visuel directement dans le code en paramétrant la largeur de votre choix (
width = XXXpx) et en laissant la hauteur en automatique (height=auto).
