Créer une popup en html css et javascript?

Script
1

Je travaille actuellement sur une refonte du site web de ma société et je suis à la recherche de nouvelles stratégies pour augmenter notre taux de conversion. Nous avons une newsletter de qualité qui offre de précieuses informations et des offres exclusives, mais nous avons du mal à obtenir des inscriptions. J’envisage d’ajouter un pop-up d’inscription à la newsletter sur notre site pour inciter les visiteurs à s’abonner. J’aimerais savoir si cela a fonctionné pour d’autres et si vous avez des conseils ou suggestions sur la façon de rendre ce pop-up le plus efficace possible. Quelle est la meilleure façon de concevoir et de mettre en œuvre ce type d’outil marketing? Quels sont les éléments de design qui incitent le plus les gens à s’inscrire? Je suis également intéressé par des exemples de pop-ups réussis pour m’inspirer.

2 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Webhook Trigger</title>
<style>
  body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
  .navbar { position: fixed; top: 0; width: 100%; background-color: #333; color: #fff; padding: 10px 20px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; }
  .navbar h2 { margin: 0; flex: 1; }
  .container { max-width: 600px; margin: auto; margin-top: 60px; padding: 20px; box-sizing: border-box; }
  .form-group { display: flex; align-items: center; }
  .form-group input[type="text"] { width: 100%; padding: 10px; margin-right: 10px; }
  .form-group button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
  .form-group button:hover { animation: bounce 1s infinite; }
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-30px);
    }
    60% {
      transform: translateY(-15px);
    }
  }
</style>
</head>
<body>
<div class="navbar">
  <h2>Simple Webhook Trigger</h2>
  <div class="form-group">
    <input type="text" id="dataInput" placeholder="Type something...">
    <button id="sendButton">Send</button>
  </div>
</div>
<div class="container">
  <!-- Contenu principal ici -->
</div>

<script>
  document.getElementById('sendButton').onclick = function() {
    var data = document.getElementById('dataInput').value;
    var webhookUrl = 'WEBHOOK_URL'; // Replace with your webhook URL
    
    fetch(webhookUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ data: data })
    })
    .then(response => response.json())
    .then(data => {
      console.log('Success:', data);
      alert('Data sent successfully!');
    })
    .catch((error) => {
      console.error('Error:', error);
      alert('Failed to send data.');
    });
  };
</script>
</body>
</html>

Remplacez WEBHOOK_URL par l’URL de votre webhook fourni par Make (Integromat). Le script ci-dessus est une page Web simple qui envoie des données à un webhook lorsque vous cliquez sur le bouton « Send ».

3

  1. Mailchimp: C’est un outil de marketing par e-mail qui offre une fonctionnalité de popup pour inciter les visiteurs à s’inscrire à votre newsletter. Les tarifs commencent à 9,99 $ par mois pour le plan Essentials. Les principales fonctionnalités comprennent les modèles de courrier électronique, les automatisations de marketing, les analyses et les outils de segmentation. URL: https://mailchimp.com/

  2. Sumo: Sumo propose des outils gratuits pour augmenter votre liste d’emails avec des popups. Ses principales fonctionnalités comprennent des popups d’inscription par e-mail, des barres de bienvenue, des boutons de partage social, et plus encore. URL: https://sumo.com/

  3. OptinMonster: C’est un puissant outil de génération de leads qui permet de créer des popups attrayants pour augmenter les inscriptions à la newsletter. Les tarifs commencent à 9 $ par mois. Ses principales fonctionnalités comprennent des popups d’inscription par e-mail, des formulaires de contact et des tests A/B. URL: https://www.optinmonster.com/

  4. Privy: C’est un outil gratuit qui permet de créer des popups pour augmenter les inscriptions à la newsletter. Ses principales fonctionnalités comprennent des popups d’inscription par e-mail, des barres de bienvenue, des spin to win popups, et plus encore. URL: https://www.privy.com/

  5. Hello Bar: C’est un outil gratuit qui permet de créer des popups pour augmenter les inscriptions à la newsletter. Ses principales fonctionnalités comprennent des popups d’inscription par e-mail, des barres de bienvenue, et plus encore. URL: https://www.hellobar.com/

  6. ConvertPlus: C’est un plugin WordPress qui permet de créer des popups pour augmenter les inscriptions à la newsletter. Le prix est de 24 $ pour une licence à vie. Ses principales fonctionnalités comprennent des popups d’inscription par e-mail, des barres de bienvenue, et plus encore. URL: Popup Plugin For WordPress - ConvertPlus by Brainstorm_Force | CodeCanyon

  7. Thrive Leads: C’est un plugin WordPress qui permet de créer des popups pour augmenter les inscriptions à la newsletter. Le prix est de 67 $ pour une licence à vie. Ses principales fonctionnalités comprennent des popups d’inscription par e-mail, des barres de bienvenue, et plus encore. URL: Thrive Leads: the Ultimate List Building Plugin for WordPress

  8. SendinBlue: C’est un outil de marketing par e-mail qui offre une fonctionnalité de popup pour inciter les visiteurs à s’inscrire à votre newsletter. Les tarifs commencent à 25 $ par mois pour le plan Lite. Les principales fonctionnalités comprennent les modèles de courrier électronique, les automatisations de marketing, les analyses et les outils de segmentation. URL: https://www.sendinblue.com/

  9. Ninja Popups: C’est un plugin WordPress qui permet de créer des popups pour augmenter les inscriptions à la newsletter. Le prix est de 27 $ pour une licence à vie. Ses principales fonctionnalités comprennent des popups d’inscription par e-mail, des barres de bienvenue, et plus encore. URL: Popup Plugin for WordPress - Ninja Popups by arscode | CodeCanyon

  10. Popup Maker: C’est un plugin WordPress gratuit qui permet de créer des popups pour augmenter les inscriptions à la newsletter. Ses principales fonctionnalités comprennent des popups d’inscription par e-mail, des barres de bienvenue, et plus encore. URL: Popup Maker – Popup for opt-ins, lead gen, & more – WordPress plugin | WordPress.org