Documentação

Integrar

Instalação: hospedado e embed

Link, iframe, script de uma linha, JavaScript e React.

Clube hospedado

O jeito mais simples: gere o token no seu servidor e mande o usuário para o clube.

text
https://clube.iclubing.com/SEU-CLUBE?token=TOKEN

O endereço exato do seu clube está em Integrações › Instalação. Funciona também dentro de um iframe:

html
<iframe src="https://clube.iclubing.com/SEU-CLUBE?token=TOKEN"
  style="width:100%;height:900px;border:0;border-radius:16px"
  title="Clube"></iframe>

Script de uma linha

O script ajusta a altura sozinho, abre em gaveta ou botão flutuante e avisa o seu site do que acontece no clube.

html
<script src="https://clube.iclubing.com/sdk/clube.js"></script>

<!-- dentro da página -->
<clube-fidelidade club-url="https://clube.iclubing.com/SEU-CLUBE" token="TOKEN" view="home" mode="inline"></clube-fidelidade>

<!-- botão flutuante que abre o clube num painel -->
<clube-fidelidade club-url="https://clube.iclubing.com/SEU-CLUBE" token="TOKEN" mode="launcher" launcher-label="Meu clube"></clube-fidelidade>
AtributoValores
modeinline (padrão), page, drawer, launcher
viewhome, checkin, roleta, missoes, torneios, premios, loja, niveis, codigo, indique, perfil, avisos, regras, duvidas, termos
heightAltura em px no modo inline (padrão 640).
launcher-labelTexto do botão flutuante (padrão “Meu clube”).

JavaScript

O mesmo script expõe o global Clube. Com ele você controla o clube e reage aos eventos:

js
const clube = Clube.init({ clubUrl: "https://clube.iclubing.com/SEU-CLUBE", token });
clube.mount("#clube", { view: "home", mode: "drawer" });

clube.on("reward.granted", (r) => toast(`Você ganhou ${r.title}!`));
clube.on("level.up", () => confetti());
clube.on("play", (p) => location.assign(p.play_url)); // "Jogar agora" de um prêmio de giros

// token venceu: peça outro ao seu servidor e troque sem recarregar
clube.on("auth.expired", async () => clube.identify(await novoToken()));

clube.open("checkin");
Opção de Clube.initPara quê
clubUrlEndereço do seu clube (obrigatório).
tokenToken do participante.
notificationsfalse desliga os avisos (“+300 XP”) e o modal de prêmio que o script desenha no seu site.
playUrlMolde do link “Jogar agora”, com {game_code}.

Eventos que o clube emite: ready, open, close, navigate, progress.updated, level.up, tier.changed, reward.granted, delivery.updated, checkin.completed, code.redeemed, mission.completed, mission.claimed, play, auth.expired.

React

tsx
import { ClubeProvider, ClubeWidget, useParticipant } from "@clubefidelidade/react";

export function Clube({ token }: { token: string }) {
  return (
    <ClubeProvider clubUrl="https://clube.iclubing.com/SEU-CLUBE" apiUrl="https://api.iclubing.com" token={token}>
      <ClubeWidget view="home" mode="launcher" />
      <Saldo />
    </ClubeProvider>
  );
}

function Saldo() {
  const { data } = useParticipant(); // recarrega quando o clube avisa que o progresso mudou
  return <span>{data?.xp ?? 0} XP</span>;
}

Apps sem backend (Base44, Lovable…)

Crie uma função de backend na sua plataforma com a chave secreta guardada como segredo (ex.: ICLUBING_KEY). A função recebe o usuário logado, chama POST /v1/participants/{id}/token e devolve só o token para a tela. Veja a receita Base44.