Intégration Wix / Squarespace

Wix et Squarespace sont connus pour leurs éditeurs visuels conviviaux qui rendent la création de sites web accessible à tous. Les deux plateformes supportent l'intégration des minuteurs gettickr.app, bien que chacune ait sa propre approche. Ce guide couvre les deux plateformes en détail.

Comparaison des plateformes

Intégration Wix

Wix utilise un éditeur glisser-déposer qui rend la création de sites web intuitive et visuelle.

Guide étape par étape pour Wix

Étape 1 : Créer votre minuteur

1. Allez sur l'éditeur
2. Concevez et configurez votre minuteur
3. Faites correspondre les couleurs et les polices à votre site Wix
4. Copiez l'URL du minuteur depuis la section Renderer

Étape 2 : Ouvrir l'éditeur Wix

1. Connectez-vous à votre compte Wix
2. Allez sur Mes sites
3. Cliquez sur "Modifier le site" sur le site où vous voulez ajouter le minuteur
4. Naviguez vers la page où le minuteur doit apparaître

Étape 3 : Ajouter un élément HTML iFrame

1. Cliquez sur le bouton "+" (Ajouter des éléments) dans la barre latérale gauche
2. Faites défiler vers le bas ou recherchez la section "Intégrer"
3. Cliquez sur "Intégrer"
4. Sélectionnez "HTML iframe" parmi les options
5. Wix place un élément espace réservé sur votre page

Étape 4 : Configurer l'iFrame

1. Cliquez sur l'élément iFrame pour le sélectionner
2. Cliquez sur "Entrer le code" ou l'icône Paramètres
3. Dans la section "Code", sélectionnez l'onglet "Code" (pas URL)
4. Collez votre code iFrame :

<iframe
  src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
  width="100%"
  height="400"
  frameborder="0"
  style="border: none;"
  title="Minuteur compte à rebours"
>
</iframe>

5. Cliquez sur "Mettre à jour"

Étape 5 : Positionner et redimensionner

1. Faites glisser l'élément à la position souhaitée
2. Redimensionnez en tirant sur les poignées d'angle
3. Utilisez les guides d'alignement de Wix (lignes bleues) pour aligner avec d'autres éléments
4. Maintenez Shift enfoncé pendant que vous glissez pour conserver les proportions

Étape 6 : Optimisation mobile

1. Cliquez sur l'icône mobile dans la barre d'outils supérieure
2. Passez à l'éditeur mobile
3. Repositionnez et redimensionnez le minuteur pour les écrans mobiles
4. Les mises en page mobile et ordinateur sont indépendantes dans Wix

Étape 7 : Publier

1. Cliquez sur "Aperçu" pour voir à quoi cela ressemble avant de publier
2. Testez sur les vues ordinateur et mobile
3. Cliquez sur "Publier" lorsque vous êtes satisfait
4. Votre minuteur est maintenant en ligne !

Paramètres des éléments Wix

Conseils de positionnement Wix

Avantages du positionnement absolu :

• Contrôle au pixel près
• Superposition sur images/sections
• Mises en page créatives
• Designs professionnels

Considérations du positionnement absolu :

• Tester soigneusement le mobile
• Peut se chevaucher sur petits écrans
• Nécessite un ajustement mobile manuel

Exemple de code Wix

Minuteur hero pleine largeur :

<div
  style="width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 20px;"
>
  <h2 style="text-align: center; font-size: 36px; margin-bottom: 20px;">
    Offre à durée limitée !
  </h2>
  <iframe
    src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
    width="100%"
    height="400"
    frameborder="0"
    style="border: none; display: block;"
    title="Minuteur de vente"
  >
  </iframe>
</div>

Minuteur de barre latérale compact :

<div
  style="background: #f8f9fa; padding: 20px; border-radius: 8px; text-align: center;"
>
  <h3 style="margin-top: 0; font-size: 20px;">Compte à rebours d'événement</h3>
  <iframe
    src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
    width="100%"
    height="250"
    frameborder="0"
    style="border: none;"
    title="Minuteur d'événement"
  >
  </iframe>
  <p style="margin-bottom: 0; font-size: 14px;">Ne manquez pas ça !</p>
</div>

Intégration Squarespace

Squarespace utilise un système d'édition basé sur des blocs avec une approche propre et moderne.

Guide étape par étape pour Squarespace

Étape 1 : Créer votre minuteur

1. Allez sur l'éditeur
2. Concevez un minuteur qui correspond à l'esthétique de votre site Squarespace
3. Les sites Squarespace ont souvent des designs minimalistes - envisagez des styles de minuteur simples
4. Copiez l'URL du minuteur

Étape 2 : Ouvrir l'éditeur Squarespace

1. Connectez-vous à votre compte Squarespace
2. Allez sur Pages dans le menu de gauche
3. Naviguez vers la page où vous voulez le minuteur
4. Cliquez sur "Modifier" pour ouvrir l'éditeur de page

Étape 3 : Ajouter un bloc de code

1. Survolez où vous voulez le minuteur (entre les blocs existants)
2. Cliquez sur le "+" (Point d'insertion) qui apparaît
3. Recherchez ou faites défiler jusqu'à "Code"
4. Cliquez sur "Code" pour ajouter un bloc de code
5. Un éditeur de code apparaît avec le placeholder <h1>HELLO</h1>

Étape 4 : Entrer le code du minuteur

1. Supprimez le code placeholder
2. Collez votre code iFrame :

<iframe
  src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
  width="100%"
  height="400"
  frameborder="0"
  style="border: none; max-width: 100%;"
  title="Minuteur compte à rebours"
>
</iframe>

3. Cliquez sur "Appliquer" en bas à droite
4. Le minuteur apparaît dans votre flux de page

Étape 5 : Ajuster la position du bloc

1. Faites glisser le bloc de code vers le haut ou le bas pour réorganiser
2. Utilisez le menu du bloc (survoler → cliquer sur six points) pour plus d'options
3. Positions courantes :
   • Au-dessus du contenu de la page - Visibilité maximale
   • En-dessous du titre - Placement contextuel
   • Avant le pied de page - Proéminent mais non intrusif

Étape 6 : Personnaliser les paramètres du bloc

1. Survolez le bloc de code
2. Cliquez sur "Modifier" pour modifier le code
3. Cliquez sur "Dupliquer" pour copier pour plusieurs minuteurs
4. Cliquez sur "Supprimer" pour supprimer

Étape 7 : Enregistrer et publier

1. Cliquez sur "Enregistrer" en haut à gauche
2. Cliquez sur "Aperçu" pour tester avant de publier
3. Utilisez les icônes d'aperçu d'appareil pour tester les vues mobile/tablette
4. Cliquez sur "Publier" ou "Mettre à jour" lorsque vous êtes prêt

Types de blocs Squarespace

Exemples de code Squarespace

Minuteur de section hero :

<section
  style="text-align: center; padding: 60px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;"
>
  <h1 style="font-size: 48px; margin: 0 0 10px 0;">Soldes d'été</h1>
  <p style="font-size: 24px; margin: 0 0 30px 0;">Se termine bientôt !</p>
  <iframe
    src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
    width="100%"
    height="400"
    frameborder="0"
    style="border: none; max-width: 1000px;"
    title="Minuteur de soldes"
  >
  </iframe>
</section>

Minuteur de contenu en ligne :

<div style="margin: 40px auto; max-width: 800px;">
  <h3 style="text-align: center; margin-bottom: 20px;">
    L'événement commence dans :
  </h3>
  <iframe
    src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
    width="100%"
    height="300"
    frameborder="0"
    style="border: none; display: block;"
    title="Minuteur d'événement"
  >
  </iframe>
</div>

Minuteur de lancement de produit :

<div
  style="background: #f5f5f5; padding: 40px; border-radius: 8px; margin: 20px 0;"
>
  <h2 style="text-align: center; margin-top: 0; color: #333;">
    🚀 Lancement de nouveau produit
  </h2>
  <iframe
    src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
    width="100%"
    height="350"
    frameborder="0"
    style="border: none;"
    title="Minuteur de lancement"
  >
  </iframe>
  <p style="text-align: center; margin-bottom: 0;">
    <a
      href="/shop"
      style="display: inline-block; padding: 12px 30px; background: #000; color: #fff; text-decoration: none; border-radius: 4px; margin-top: 20px;"
    >
      Être notifié
    </a>
  </p>
</div>

Style avancé (les deux plateformes)

CSS personnalisé pour Wix

Emplacement : Paramètres du site → Code personnalisé → Ajouter du code personnalisé (dans <head>)

<style>
  /* Styliser toutes les iFrames sur le site */
  iframe {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }

  /* Style spécifique au mobile */
  @media (max-width: 768px) {
    iframe {
      height: 300px !important;
    }
  }
</style>

CSS personnalisé pour Squarespace

Emplacement : Design → CSS personnalisé

/* Styliser les iFrames de bloc de code */
.sqs-block-code iframe {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.sqs-block-code iframe:hover {
  transform: scale(1.02);
}

/* Optimisation mobile */
@media screen and (max-width: 767px) {
  .sqs-block-code iframe {
    height: 250px !important;
  }
}

Dépannage

Dépannage Wix

Dépannage Squarespace

Considérations de performance

Les deux plateformes optimisent automatiquement les performances, mais considérez :

Considérations spécifiques aux templates

Templates Wix

Templates Squarespace

Étapes suivantes

• Intégration iFrame - Guide de personnalisation détaillée des iFrames
• Personnaliser le design du minuteur - Faire correspondre l'esthétique de votre site
• Intégration WordPress - Si vous utilisez également WordPress
• Intégration Shopify - Pour les boutiques e-commerce