Vos votes et votre billetterie, sur votre propre site.

Le SDK est un fichier JavaScript à poser sur n’importe quel site — WordPress, Shopify, une page HTML, une application React ou Vue. Il affiche vos données réelles, gère la recherche, les filtres, la pagination, le paiement et son suivi. Vous n’écrivez aucun appel réseau.

<div id="votes"></div>

<script src="https://cdn.zekin.me/zekin-sdk.js"></script>
<script>
  const zekin = Zekin.init({
    apiUrl: "https://api.zekin.me/api/v1",
    brandDomain: "ma-marque.com",
  });

  zekin.nomineeList("#votes", { edition: "vibrations-vocales/edition-3" });
</script>

Si votre site est construit avec un empaqueteur, le SDK s’installe aussi comme dépendance.

import { init } from "@zekin/sdk";

const zekin = init({ apiUrl: "https://api.zekin.me/api/v1", brandDomain: "ma-marque.com" });
zekin.nomineeList("#votes", { edition: "vibrations-vocales/edition-3" });

Cinq composants, à monter là où vous voulez dans votre page. Chacun prend un sélecteur (ou un élément) et ses options. L’édition se désigne par son adresse — celle que vous lisez dans votre espace — ou par son identifiant.

zekin.nomineeList("#votes", {
  edition: "vibrations-vocales/edition-3",
  // ou :  event: "vibrations-vocales"   → l'édition en cours
  showEventDetails: true,                // false si votre page a déjà son en-tête
});

Présentation de l’évènement, grille des nominés, recherche, filtre par catégorie, pagination, vote et partage.

zekin.nomineePage("#nomine", {
  edition: "vibrations-vocales/edition-3",
  keyword: "juliette-kidjo",   // le mot-clé du nominé
});

zekin.ticketPage("#billetterie", { edition: "mon-festival/edition-2026" });

Tarifs, date, lieu, décompte, galerie, et l’achat.

zekin.voteForm("#voter", {
  edition: "vibrations-vocales/edition-3",
  keyword: "juliette-kidjo",
  onApproved: (nomine, votes) => console.log("vote confirmé", nomine, votes),
});

zekin.ticketForm("#acheter", { edition: "mon-festival/edition-2026" });

Les deux derniers existent pour les sites qui écrivent eux-mêmes la page qui entoure le formulaire : panier, code promo, moyens de paiement et suivi de la transaction restent pris en charge.

Le SDK reprend d’office les modèles que vous avez choisis dans votre espace — Marque blanche → Apparence. Vous n’avez rien à recopier ici : ce que vous sélectionnez là-bas est ce que vos visiteurs voient. Trente-six mises en page réparties en sept familles.

Une intégration peut toutefois imposer un modèle, par exemple pour qu’une page précise de votre site s’écarte du reste.

Zekin.init({
  apiUrl: "https://api.zekin.me/api/v1",
  templates: { nomineeList: "list-4", checkout: "form-2" },
});

Les couleurs et l’arrondi viennent eux aussi de votre espace. Vous pouvez les remplacer, par exemple pour accorder le SDK à la charte du site qui l’accueille. Chaque valeur que vous ne donnez pas garde celle de votre marque.

Zekin.init({
  apiUrl: "https://api.zekin.me/api/v1",
  theme: {
    primaryColor: "#7C3AED",
    secondaryColor: "#22D3EE",
    accentColor: "#F59E0B",

    // Le bouton qui engage le paiement, réglable à part
    voteButtonBackground: "#111827",
    voteButtonTextColor: "#FFFFFF",

    radius: 16,                            // 0 à 24 px
    fontFamily: "Inter, system-ui, sans-serif",

    // Pour poser le SDK sur un site sombre
    background: "#0F172A",
    surface: "#1E293B",
    textColor: "#E2E8F0",

    css: ".zk-cols { gap: 28px }",          // la porte de sortie
  },
});

Ces réglages s’appliquent aussi en cours de route, sans rien recharger — pratique si votre site propose un mode sombre.

zekin.setTheme({ primaryColor: "#EF4444" });

Deux réglages commandent les listes : le nombre de nominés par ligne et le nombre de lignes par page. Leur produit fait la pagination — ci-dessous, 5 × 3, soit quinze nominés par page. C’est ce qui garde une page pleine, sans dernière ligne à moitié vide.

Zekin.init({
  apiUrl: "https://api.zekin.me/api/v1",
  layout: { perRow: 5, rowsPerPage: 3 },   // 15 nominés par page
});

Les options acceptées par Zekin.init().

Et ce que le client rend une fois initialisé.

zekin.nomineeList(cible, options)   // la page de vote
zekin.nomineePage(cible, options)   // la fiche d'un nominé
zekin.ticketPage(cible, options)    // la billetterie
zekin.voteForm(cible, options)      // le formulaire de vote seul
zekin.ticketForm(cible, options)    // le tunnel d'achat seul

zekin.setTheme({ ... })             // couleurs : effet immédiat
zekin.setTemplates({ ... })         // modèles : au prochain montage
zekin.setLayout({ ... })            // par ligne / par page
zekin.setLocale("en")               // langue

zekin.destroy()                     // démonte tout