Widget de réservation de ferry

Démarrage rapide

La mise en ligne tient en quatre étapes. Aucun outil de build, aucun framework, aucun npm install — juste une balise script et un élément personnalisé.

<script src="https://ferrygate.com/widget/default/latest.js" defer></script>

<ferrygate-booking
  api-key="wgt_xxxxxxxxxxxxxxxx"
  lang="fr"></ferrygate-booking>

<!-- Checkout auto-derived: <your-origin>/checkout (nothing to configure) -->
<ferrygate-booking
  api-key="wgt_xxxxxxxxxxxxxxxx"
  lang="fr"></ferrygate-booking>

<!-- Optional overrides: checkout-path="/pay"  ·  checkout-url="https://other-domain.com/pay" -->

Installer selon votre environnement

Le widget est un Web Component standard : il fonctionne dans n'importe quelle stack. La balise script et l'élément ne changent jamais — seule la façon de les inclure varie. Choisissez votre environnement ci-dessous.

<script src="https://ferrygate.com/widget/default/latest.js" defer></script>

<ferrygate-booking api-key="wgt_..." lang="fr"></ferrygate-booking>

add_action('wp_enqueue_scripts', function () {
  wp_enqueue_script(
    'ferrygate-widget',
    'https://ferrygate.com/widget/default/latest.js',
    [], null, true // load in the footer
  );
});

<ferrygate-booking api-key="wgt_..." lang="fr"></ferrygate-booking>

{{-- layout.blade.php (or base.html.twig) --}}
<script src="https://ferrygate.com/widget/default/latest.js" defer></script>

{{-- any page template --}}
<ferrygate-booking api-key="wgt_..." lang="fr"></ferrygate-booking>

import Script from 'next/script'

export default function BookingPage() {
  return (
    <>
      <Script src="https://ferrygate.com/widget/default/latest.js" strategy="afterInteractive" />
      <ferrygate-booking api-key="wgt_..." lang="fr" />
    </>
  )
}

export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => tag === 'ferrygate-booking'
    }
  },
  app: {
    head: {
      script: [{ src: 'https://ferrygate.com/widget/default/latest.js', defer: true }]
    }
  }
})

<ferrygate-booking api-key="wgt_..." lang="fr" />

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA] // or in a standalone component
})
export class AppModule {}

Attributs

L'élément se configure entièrement via des attributs HTML. Aucune initialisation JavaScript n'est requise.

Modes

Le widget fonctionne dans l'un des deux modes. Le mode est porté par la clé widget elle-même — vous ne le définissez pas via un attribut. Demandez à votre administrateur quel mode utilise votre clé.

Origines autorisées (CORS)

Chaque clé widget porte une liste blanche d'origines. Le widget n'accepte que les requêtes provenant de ces domaines. Le HTTPS est requis en production ; le http simple est toléré pour le développement local.

Une requête provenant d'une origine absente de la liste blanche est rejetée avec une réponse 403.

Bundle et isolation

Securité

• Token opaque. La clé widget est un identifiant opaque. Elle n'expose au navigateur aucun tarif, aucune marge ni aucun détail interne du compte.

• Limite de débit. Chaque token est plafonné à 120 requêtes par minute. Dépasser cette limite renvoie une réponse 429 jusqu'à la réinitialisation de la fenêtre.

• Révocable. Une clé compromise peut être révoquée instantanément par votre administrateur, désactivant immédiatement le widget partout où il est intégré.

Dépannage et FAQ