Présentation
Le but de ce site est faciliter l'intégration avec l'API de prise de rendez-vous Cosium Center, en fournissant un composant prêt à l'emploi, intégrable par iframe.
Avant son utilisation, il est nécessaire de prendre contact avec Cosium pour que l'activation de ce composant soit effectuée pour votre application. Vous pourrez à ce moment choisir les catégories affichées dans le widget, ainsi que les couleurs dominantes.
Intégration
L'intégration sur votre site s'effectue par iframe par l'url:
https://booking.cosium.net/wizard/[APPLICATION]/[MAGASIN].
[APPLICATION] étant le nom de votre application center, et [MAGASIN] le nom de votre magasin. Ex:
<iframe src="https://booking.cosium.net/wizard/XXXXXXXX/YYY" width="1200" height="1600" frameborder="0"></iframe>
Le site incluant cette iframe doit être sécurisé (https).
Affichage conditionnel de catégories
Masquer des types de rendez-vous est possible en ajoutant un ou plusieurs des paramètres suivants à l'url:
- hideHearingAid: masque les rendez-vous d'appareillage audio
- hideAudio: masque les rendez-vous d'examen audio
- hideOptic: masque les rendez-vous d'optique
- hideOptometry: masque les rendez-vous d'optométrie
- hideContactLens: masque les rendez-vous de contactologie
Par exemple https://booking.cosium.net/wizard/XXXXXXXX/YYY?hideHearingAid&hideAudio masquera tous les rendez-vous audio.
Redimensionnement
Si vous souhaitez redimensionner dynamiquement votre cadre d'iframe au contenu, la librairie iframe-resizer est intégrée au composant.
Événements
Des événements sont envoyés lors du processus de prise de rendez-vous à la fenêtre parente.
Ils peuvent être interceptés via un listener :
window.addEventListener('message', function(event) {
console.log("Evénement reçu : " + event.data);
});
Le contenu du message (event.data) est un json sérialisé.
L'attribut type contient le type de l'événement.
booking_complete
Envoyé quand l'utilisateur a pris rendez-vous avec succès.
Attributs :
- centerApplication : code d'application center
- centerStoreCode : code de magasin center
- centerCategoryCode : code de catégorie de rendez-vous center
- startDate : date du rendez-vous au format ISO 8601
- firstname : prénom
- lastname : nom de famille
- phone : téléphone
- mail : adresse email
Exemple :
{
"type":"booking_complete",
"centerApplication":"MYAPPLICATION",
"centerStoreCode":"100",
"centerCategoryCode":"RDV-LENTILLES",
"startDate":"2023-04-14T07:00:00.000Z",
"firstname":"Jean",
"lastname":"Dupont",
"phone":"06 06 06 06 06",
"mail":"some@mail.com"
}
Erreurs
- Refus de connexion du navigateur: la plupart des navigateurs bloquent les inclusions d'iframe d'un domaine non-sécurisé (http) vers un domaine sécurisé (https). Le site incluant l'iframe doit donc être https.
- Erreur 404: l'activation de la prise de rendez-vous n'a pas été effectuée pour cette application, ou son code dans l'url est incorrect.
- Message 'This store code is invalid! Please verify it in your center application.' dans la console javascript: le code magasin entré dans l'url n'est pas correct.
- Message 'The category code XXX is not defined in your center application. Please add it.' dans la console javascript: une catégorie de rendez-vous est manquante dans votre configuration center. Un administrateur pourra l'ajouter.
- Aucun créneaux disponibles: les horaires d'ouvertures de votre magasin doivent être définis dans votre application center.