Documentation Widget Tap4Book

Introduction

Le widget Tap4Book est un système de réservation en ligne sophistiqué qui peut être intégré sur n'importe quel site web. Il offre une expérience utilisateur fluide avec gestion des disponibilités en temps réel.

Intégration rapide

Intégrez le widget en quelques minutes avec une simple ligne de code

Personnalisable

Adaptez l'apparence et les fonctionnalités à vos besoins

Sécurisé

Protection contre les doubles réservations et données chiffrées

URL de base

L'URL du widget suit cette structure standardisée :

https://[DOMAINE]/widgets/widget.php?widgetID=[IDENTIFIANT]&[PARAMETRES_OPTIONNELS]

Environnements disponibles

Environnement	Domaine	Usage
Test	`staging-app.tap4book.com`	Tests et développement
Production	`app.tap4book.com`	Environnement de production

Attention

Les environnements de test et de production sont distincts. Un widgetID valide sur staging-app.tap4book.com ne fonctionnera pas nécessairement sur app.tap4book.com et vice versa.

Assurez-vous d'utiliser le bon domaine et le bon widgetID pour chaque environnement.

Paramètres obligatoires

Paramètre	Type	Description	Exemple
`widgetID`	String	Identifiant unique du widget	`widgetID=12345`

Paramètres dynamiques (Tags)

Les tags permettent de transmettre des informations personnalisées au widget pour le tracking, la personnalisation ou le pré-remplissage de données.

Tags disponibles

Paramètre	Description	Exemple d'utilisation
`tag1`	Variable libre	`tag1=REF-CLIENT-001`
`tag2`	Variable libre	`tag2=CAMPAGNE-2024`
`tag3`	Variable libre	`tag3=SOURCE-WEBSITE`
`tag4`	Variable libre	`tag4=CONTRAT-12345`
`tag5`	Variable libre	`tag5=AGENCE-PARIS`
`tag6`	Variable libre	`tag6=COMMERCIAL-DUPONT`
`tag7`	Variable libre	`tag7=PRODUIT-PREMIUM`
`tag8`	Variable libre	`tag8=UTM_SOURCE`
`tag9`	Variable libre	`tag9=UTM_MEDIUM`
`tag10`	Variable libre	`tag10=UTM_CAMPAIGN`

Paramètres de pré-remplissage

Paramètre	Description	Format	Exemple
`firstName`	Prénom du client	Texte	`firstName=Jean`
`lastName`	Nom du client	Texte	`lastName=Dupont`
`email`	Email du client	Email valide (caractères spéciaux encodés)	`email=jean%2Btest@example.com`
`phone`	Téléphone du client	Format E164 sans le "+"	`phone=33612345678`

Format des numéros de téléphone

Important : Les numéros de téléphone doivent être au format E164 sans le symbole "+".

France : 33 + numéro sans le 0 initial (ex: 33612345678 pour 06.12.34.56.78)
Belgique : 32 + numéro sans le 0 initial (ex: 32412345678)
Suisse : 41 + numéro sans le 0 initial (ex: 41791234567)

SMS de confirmation : Un SMS de confirmation sera automatiquement envoyé si le numéro commence par 336 ou 337 (mobiles français) sous réserve que l'option SMS soit active sur le compte du client.

Encodage des caractères spéciaux dans les emails

Attention : Le caractère "+" dans les adresses email doit être encodé comme %2B dans les URLs.

❌ Incorrect :

email=marie+martin@gmail.com

✅ Correct :

email=marie%2Bmartin@gmail.com

Pourquoi ? Dans les URLs, le caractère "+" est interprété comme un espace. Pour transmettre un "+" littéral, il faut l'encoder en "%2B".

Exemples d'intégration

URL simple - Test

Intégration basique avec uniquement l'ID du widget (environnement de test)

https://staging-app.tap4book.com/widgets/widget.php?widgetID=12345

URL simple - Production

Intégration basique avec uniquement l'ID du widget (environnement de production)

https://app.tap4book.com/widgets/widget.php?widgetID=12345

URL avec tags de tracking

Intégration avec suivi de campagne marketing

https://app.tap4book.com/widgets/widget.php?widgetID=12345&tag1=CAMPAGNE-ETE-2024&tag2=SOURCE-FACEBOOK&tag3=VILLE-PARIS

URL avec pré-remplissage client

Intégration avec données client pré-remplies

https://app.tap4book.com/widgets/widget.php?widgetID=12345&firstName=Marie&lastName=Martin&email=marie.martin@email.fr&phone=33612345678

URL complète avec tous les paramètres

Exemple d'utilisation avancée avec multiples paramètres

https://app.tap4book.com/widgets/widget.php?widgetID=12345&firstName=Jean&lastName=Dupont&email=jean@example.com&phone=33612345678&tag1=REF-2024-001&tag2=CAMPAGNE-PRINTEMPS&tag3=SOURCE-SITE-WEB&tag4=COMMERCIAL-MARTIN&tag5=AGENCE-LYON

URL avec caractères spéciaux (encodés)

Gestion correcte des caractères spéciaux, espaces et emails avec "+"

https://app.tap4book.com/widgets/widget.php?widgetID=12345&tag1=REF%202024%20001&tag2=Campagne%20%C3%A9t%C3%A9&firstName=Jean-Pierre&lastName=D%27Artagnan&email=bdausse%2Bmarie.martin@gmail.com&phone=33612345678

Modes d'intégration

1. Intégration iFrame

La méthode la plus simple pour intégrer le widget dans votre page

iFrame simple

<iframe 
    src="https://app.tap4book.com/widgets/widget.php?widgetID=12345"
    width="100%"
    height="600"
    frameborder="0">
</iframe>

iFrame avec paramètres dynamiques

<iframe 
    src="https://app.tap4book.com/widgets/widget.php?widgetID=12345&tag1=SOURCE-HOMEPAGE&tag2=CLIENT-VIP"
    width="100%"
    height="600"
    frameborder="0">
</iframe>

2. Intégration Popup

Affichez le widget dans une fenêtre popup élégante

Popup automatique - Production

<!-- Bouton avec popup automatique - Production -->
<div data-tap4book-widget="12345"
     data-tap4book-environment="production"
     data-tap4book-position="bottom-right"
     data-tap4book-text="Prendre RDV"
     data-tap4book-tag1="SOURCE-POPUP"
     data-tap4book-tag2="PAGE-ACCUEIL">
</div>
<script src="https://app.tap4book.com/widgets/public/js/tap4book-popup.js"></script>

Popup automatique - Test

<!-- Bouton avec popup automatique - Test -->
<div data-tap4book-widget="12345"
     data-tap4book-environment="test"
     data-tap4book-position="bottom-right"
     data-tap4book-text="Prendre RDV"
     data-tap4book-tag1="SOURCE-POPUP"
     data-tap4book-tag2="PAGE-ACCUEIL">
</div>
<script src="https://staging-app.tap4book.com/widgets/public/js/tap4book-popup.js"></script>

Initialisation manuelle avec JavaScript

<script src="https://app.tap4book.com/widgets/public/js/tap4book-popup.js"></script>
<script>
// Création manuelle du popup
const widget = new Tap4BookPopup({
    widgetID: '12345',
    environment: 'production',
    position: 'bottom-left',
    text: 'Prendre RDV',
    buttonColor: '#11B980',
    size: 'large',
    tag1: 'SOURCE-MANUAL',
    tag2: 'CUSTOM-BUTTON'
});

// Événements disponibles
window.addEventListener('tap4book:modalOpened', (e) => {
    console.log('Modal ouverte', e.detail);
});

window.addEventListener('tap4book:modalClosed', (e) => {
    console.log('Modal fermée', e.detail);
});
</script>

Options de configuration du popup

Attribut	Description	Valeurs possibles	Défaut
`data-tap4book-environment`	Environnement à utiliser	`production`, `test`	`production`
`data-tap4book-position`	Position du bouton	`bottom-right`, `bottom-left`, `top-right`, `top-left`, `center-right`, `center-left`	`bottom-right`
`data-tap4book-text`	Texte du bouton	Texte libre	`Prendre RDV`
`data-tap4book-button-color`	Couleur du bouton	Code couleur hexadécimal	`#11B980`
`data-tap4book-size`	Taille du bouton	`small`, `medium`, `large`	`medium`

3. Intégration JavaScript dynamique

Créez des URLs dynamiquement selon vos besoins

Génération d'URL dynamique

// Créer une URL dynamiquement
function generateWidgetURL(clientData, environment = 'production') {
    const baseURL = environment === 'test' 
        ? 'https://staging-app.tap4book.com/widgets/widget.php'
        : 'https://app.tap4book.com/widgets/widget.php';
    
    const params = new URLSearchParams({
        widgetID: '12345',
        firstName: clientData.firstName || '',
        lastName: clientData.lastName || '',
        email: clientData.email || '',
        tag1: clientData.source || '',
        tag2: clientData.campaign || '',
        tag3: new Date().toISOString().split('T')[0] // Date du jour
    });
    
    return `${baseURL}?${params.toString()}`;
}

// Utilisation en production
const url = generateWidgetURL({
    firstName: 'Marie',
    lastName: 'Curie',
    email: 'marie@example.com',
    source: 'NEWSLETTER',
    campaign: 'PROMO-2024'
});

// Utilisation en test
const testUrl = generateWidgetURL({
    firstName: 'Marie',
    lastName: 'Curie',
    email: 'marie@example.com',
    source: 'NEWSLETTER',
    campaign: 'PROMO-2024'
}, 'test');

4. Intégration avec tracking analytics

Suivez les interactions avec vos outils analytics

Exemple avec Google Analytics

// Exemple avec Google Analytics
function openWidgetWithTracking(campaign, source, environment = 'production') {
    const baseURL = environment === 'test' 
        ? 'https://staging-app.tap4book.com/widgets/widget.php'
        : 'https://app.tap4book.com/widgets/widget.php';
    
    const widgetURL = new URL(baseURL);
    widgetURL.searchParams.append('widgetID', '12345');
    widgetURL.searchParams.append('tag1', campaign);
    widgetURL.searchParams.append('tag2', source);
    widgetURL.searchParams.append('tag8', 'utm_source_' + source);
    widgetURL.searchParams.append('tag9', 'utm_campaign_' + campaign);
    
    // Tracking Google Analytics
    if (typeof gtag !== 'undefined') {
        gtag('event', 'widget_open', {
            'event_category': 'booking',
            'event_label': campaign,
            'custom_parameters': {
                'environment': environment
            }
        });
    }
    
    // Ouvrir le widget
    window.open(widgetURL.toString(), '_blank');
}

Configuration avancée

Personnalisation via fichier JSON

Chaque widget peut avoir son propre fichier de configuration JSON permettant de personnaliser :

Les libellés des champs tag1 à tag10
Les règles de validation
Les couleurs et le style
Les messages d'erreur
Les options de calendrier

Avertissement : Pour accéder à la documentation de la personnalisation avancée du widget veuillez contacter votre chargé de compte TAP4BOOK.

Sécurité

Important

Les données transmises via URL sont visibles. Ne jamais inclure :

Mots de passe
Numéros de carte bancaire
Informations médicales sensibles
Données personnelles sensibles

Bonnes pratiques

À faire

Encoder les caractères spéciaux
Limiter les tags à 255 caractères
Utiliser HTTPS
Valider les données côté serveur

À éviter

Transmettre des données sensibles
Dépasser les limites de caractères
Utiliser HTTP non sécurisé
Faire confiance aux données client

Dernière mise à jour : Avril 2025

Retour Accueil Documentations

Navigation