Um widget mostra seus eventos, bilhetes ou pessoas da Kadens no seu próprio site, e os visitantes podem comprar sem sair dele. Você precisa de uma conta Kadens e acesso para editar o seu site. Crie um widget, permita o seu site, e depois copie e cole um pequeno código.
Um widget é um pedaço da sua página Kadens que vive dentro do seu site. Existem três tipos:
| Widget | Descrição |
|---|---|
Eventos e ingressos | Seus próximos eventos, com a compra de ingressos dentro do seu site. |
Um evento | A página de um evento: datas, local, descrição e bilhetes, com Comprar. |
Pessoas | Cartões de perfil das pessoas que você escolher, com link para os perfis públicos. |
Cursos | Seus cursos com os preços, cada um com link para a página dele no seu site. |
Planos e preços | Seus planos de assinatura lado a lado, cada um com link para a página de inscrição. |
Grade de aulas | Suas próximas aulas em forma de agenda, sempre atualizada. |
Botão de compra | Um botão para um evento, curso ou plano, no estilo da sua página. |
O código que você cola apenas nomeia o seu widget. Quando você muda o widget na Kadens (o que ele mostra, o seu layout ou as suas cores), todo site que o usa se atualiza sozinho. Você nunca precisa colar o código de novo.
Quatro passos, sem precisar programar.
Na Kadens, abra Integrações, depois Widgets, e crie um. Escolha o que ele mostra e a sua aparência.
Adicione o endereço do seu site, como https://www.exemplo.com. Um widget só aparece nos sites que você permitir.
Abra o seu widget e vá até a aba Instalar. Copie o código mostrado ali. Ele já traz o seu nome de usuário e o seu widget.
Cole o código onde quer que o widget apareça, depois publique o seu site. Encontre o seu construtor de site nos guias abaixo para os passos exatos.
Um widget só carrega nos sites que você adicionar à sua lista.
Isso protege o seu checkout: ninguém pode colocar o seu widget em uma página que você não controla. A sua lista é enviada aos navegadores como uma regra de segurança (frame-ancestors), então um site que não está nela não mostra nada onde o widget deveria estar.
| Endereço | Resultado |
|---|---|
https://www.example.com | Permitido. Um site. Qualquer caminho ou barra final que você digitar é removido. |
https://*.example.com | Permitido. Todos os subdomínios de um nível, como shop.exemplo.com. Não inclui exemplo.com em si nem níveis mais profundos como a.b.exemplo.com: adicione-os como entradas próprias. |
* | Não permitido. Isso deixaria qualquer site da internet mostrar o seu widget. |
https://*.com | Não permitido. Um curinga precisa de um domínio real depois dele. |
http://www.example.com | Não permitido. Os sites devem usar https. |
http://localhost:3000 | Permitido para testes no seu próprio computador. http funciona apenas para localhost. |
https://www.example.com/tickets | Salvo como https://www.exemplo.com. O site inteiro é permitido, não apenas uma página. Um endereço com ? ou # é recusado. |
https://203.0.113.7 | Não permitido. Use o nome de domínio do seu site. |
Um script e um elemento. A aba Instalar gera esse código para você.
Para qualquer site que aceite código. Ajusta a altura sozinho.
Nos exemplos desta página, your-username e your-widget-id representam os seus próprios valores. Copie o seu código real da aba Instalar.
| Atributo | Tipo | Descrição |
|---|---|---|
handleObrigatório | string | Seu nome de usuário Kadens. |
widgetObrigatório | string | O id do widget a mostrar. |
locale | string | O idioma do widget. Quando ausente, o widget usa o lang da sua página. |
color-scheme | light | dark | auto | Força cores claras ou escuras para esta instância. Deixe em branco para usar a configuração do próprio widget. |
title | string | O nome acessível do quadro do widget, lido por leitores de tela. O padrão é Kadens widget. |
data-layer | boolean | Também envia todo evento do widget para window.dataLayer, para o Google Tag Manager. |
meta-pixel | boolean | Envia um evento Purchase ao seu Meta Pixel quando alguém completa uma compra. A sua página já precisa carregar o pixel. |
Para criadores de sites que removem scripts. Altura fixa.
Escolha o seu construtor de site. Cada guia diz o que você precisa antes, onde o código vai e o que verificar.
Precisa de acesso para editar as páginas do seu site, ou de alguém que o tenha e cole o código por si.
Por página: cole o código em cada página onde o widget deve aparecer. Se o seu site tiver um lugar para código em todas as páginas (muitas vezes chamado código de cabeçalho ou de rodapé), pode colocar lá a primeira linha uma vez e colar só a segunda em cada página.
Abra a página publicada num novo separador. O widget aparece onde colou o código, normalmente em poucos segundos.
O WordPress alojado por si (WordPress.org) funciona sempre. No WordPress.com precisa de um plano pago com funcionalidades de alojamento: o plano Free remove o script e o widget não aparece.
Por página: adicione um bloco Custom HTML em cada página ou artigo onde o widget deve aparecer. O WordPress não tem um lugar próprio para código em todas as páginas, por isso cole o código completo em cada bloco.
Abra a página no site publicado, não no editor. O widget aparece onde adicionou o bloco.
O Custom Code precisa de um plano Premium e de um domínio ligado. Sem os dois, o widget não aparece no site.
Nas páginas que escolher. O Custom Code corre na própria página, no seu domínio, e o widget aparece no fim de cada página escolhida.
Abra a página no seu próprio domínio, não na pré-visualização do Editor. O widget aparece no fim da página.
Precisa de ser o dono da loja ou um membro da equipa com permissão para editar temas no Shopify admin.
Por modelo: uma secção adicionada no editor de temas aparece em todas as páginas que usam esse modelo (por exemplo, todas as de produto). Para a mostrar só numa página, crie primeiro um modelo próprio para ela. Para todas as páginas, vá a Online Store › Themes › … › Edit code e cole-o em layout/theme.liquid mesmo antes da etiqueta de fecho do body; o widget aparece então no fim de cada página.
Abra a loja num novo separador, não no editor de temas, e vá a essa página. O widget aparece onde está a secção.
O Code Embed só funciona com um plano de site pago ou num Workspace Core, Growth, Agency ou Freelancer. Num site Starter gratuito o widget não aparece.
Por página: coloque um Code Embed onde o widget deve aparecer. Para todas as páginas, cole-o uma vez em Site settings › Custom code › Footer code, que corre antes da etiqueta de fecho do body e precisa de um Site plan pago; o widget aparece então no fim de cada página. Para o manter dentro das páginas, ponha só a primeira linha em Footer code e a segunda em cada Code Embed.
Abra o site publicado. No Designer o Code Embed mostra um marcador em vez do widget; é normal.
Os scripts funcionam nos planos Core, Plus e Advanced. No plano Personal o widget não aparece, e a versão iframe também não.
Por página: adicione um bloco Code em cada página onde o widget deve aparecer. Para todas as páginas, cole-o uma vez no painel Code Injection em Settings.
Abra a página do site publicado numa janela privada. No editor o bloco mostra um marcador, porque os scripts não correm na pré-visualização do editor.
Precisa de acesso de edição ao projeto Framer.
Por página: coloque um Embed onde o widget deve aparecer e cole o código completo em cada Embed.
Abra o site publicado e vá à página. O widget aparece onde colocou o Embed.
Precisa de uma conta de equipa no Ghost que possa publicar (Author ou superior). Os Contributors podem adicionar o cartão mas não publicá-lo.
Por artigo ou página: adicione um cartão HTML onde o widget deve aparecer. Para todas as páginas, cole-o uma vez em Settings › Advanced › Code injection › Site footer; o widget aparece então no fim de cada página. Para o manter dentro dos artigos, ponha só a primeira linha em Site footer e a segunda em cada cartão HTML.
Abra o artigo ou a página publicados. O editor mostra o cartão como código; o widget só aparece na página publicada.
Precisa de permissão para editar e publicar páginas do site ou landing pages no HubSpot.
Por página: cole o código no Source code de um módulo Rich text onde o widget deve aparecer, ou em Settings › Advanced › Footer HTML do editor da página para o mostrar no fim dessa página. Para todas as páginas de um domínio, vá a Settings › Content › Pages, escolha o domínio e cole-o em Site footer HTML.
Abra a página publicada. Se o widget faltar, abra de novo o Source code do módulo: se a linha do script desapareceu, o HubSpot removeu-a.
Altere estes campos no estúdio de widgets na Kadens. O seu site se atualiza sozinho.
| Configuração | Valores | Descrição |
|---|---|---|
Tema | site | kadens | minimal | bold | soft | dark | Um estilo inicial. Você pode ajustar qualquer detalhe depois de escolher um. |
Esquema de cores | light | dark | auto | Claro, escuro, ou automático para seguir o dispositivo do visitante. |
Cores | accent, accentForeground, background, card, text, mutedText, border | Suas próprias cores para botões, fundos, cartões, texto e bordas. |
Fontes | A fonte do seu site, a fonte do sistema do visitante, ou uma do catálogo de fontes da Kadens. As fontes carregam dentro do widget a partir da Kadens, nunca do Google. | |
Tamanho do texto | 12 to 22 px | O tamanho base do texto do widget. |
Raio dos cantos | 0 to 64 px | Quão arredondados são os cartões e botões. |
O elemento do widget envia eventos DOM para a sua página, para você medir cliques e vendas com a sua própria análise.
| Evento | Conteúdo | Descrição |
|---|---|---|
kadens:ready | { widget } | O widget carregou e está visível. |
kadens:widget-view | { widget, ...props } | Uma ação do visitante dentro do widget. Com data-layer, também é enviada para window.dataLayer como kadens_widget_view. |
kadens:item-click | { widget, ...props } | Uma ação do visitante dentro do widget. Com data-layer, também é enviada para window.dataLayer como kadens_item_click. |
kadens:checkout-open | { widget, ...props } | Uma ação do visitante dentro do widget. Com data-layer, também é enviada para window.dataLayer como kadens_checkout_open. |
kadens:checkout-complete | { widget, ...props } | Uma ação do visitante dentro do widget. Com data-layer, também é enviada para window.dataLayer como kadens_checkout_complete. |
kadens:powered-by-click | { widget, ...props } | Uma ação do visitante dentro do widget. Com data-layer, também é enviada para window.dataLayer como kadens_powered_by_click. |
kadens:checkout-completed | { widget, orderRef, kind, amountMinor, currency } | Uma compra foi concluída. O valor está em unidades menores (centavos para EUR ou USD). Com meta-pixel, também envia um Purchase ao seu Meta Pixel. |
<kadens-widget handle="your-username" widget="your-widget-id" data-layer></kadens-widget>
<script>
document.addEventListener('kadens:checkout-completed', (event) => {
const { orderRef, amountMinor, currency } = event.detail;
gtag('event', 'purchase', {
transaction_id: orderRef,
value: amountMinor / 100, // amounts arrive in minor units (cents)
currency,
});
});
</script>Adicione o atributo meta-pixel. Nada mais é necessário se a sua página já carrega o pixel.
<kadens-widget handle="your-username" widget="your-widget-id" meta-pixel></kadens-widget>O pagamento acontece dentro do widget, em uma janela segura sobre a sua página. Os compradores não saem do seu site e você não precisa da sua própria configuração de pagamentos.
Os compradores podem pagar apenas com o e-mail, ou entrar na conta Kadens diretamente pelo widget.
O pagamento abre em uma nova aba.
| Problema | Solução |
|---|---|
A área do widget está em branco | Quase sempre o seu site está faltando nos seus sites permitidos. Adicione o endereço exato que você vê no navegador, incluindo www se ele tiver. |
O código desaparece depois de salvar | Alguns construtores de site removem scripts. Use o código iframe em vez disso: abra Avançado na aba Instalar e escolha iframe. |
O seu construtor não aceita código | Alguns construtores de site só aceitam código personalizado em um plano pago. O guia de cada construtor acima diz se é o caso do seu. |
Você ainda vê a página antiga | Publique o seu site de novo e recarregue a página. Alguns construtores mantêm uma cópia antiga por alguns minutos. |
Isso ajudou?