# Opções avançadas de incorporação

> O widget incorporado aceita mais configurações do que o snippet de copiar e colar mostra, incluindo a transmissão de opções do cliente para o checkout que ele abre.

Os códigos de incorporação gerados na sua conta Entase inserem um widget de evento pronto em uma página. Eles foram projetados para serem copiados e colados sem nenhum trabalho de desenvolvimento – consulte [Incorporar eventos no seu site](/organizers/sharing-and-embedding/embedding-events-on-your-website.md) para saber como obter um.

Esta página documenta as opções que você pode adicionar a esse snippet e como configurar o checkout que ele abre.

O widget carrega o próprio cliente JavaScript, portanto você não deve adicionar `client.js` junto com ele. Ele também não precisa de uma chave publicável: o widget é fornecido pela Entase, portanto o checkout é autorizado pelo widget, e não por uma chave na sua página.

## Configuração

Cada widget é configurado com um objeto de opções:

```html
<div id="entase_OBJ_CODE"></div>
<script>
  window.entase = window.entase || { o: [] };
  window.entase.o.push({
    obj: 'OBJ_CODE',
    theme: 'dark',
    ext: true
  });
</script>
<script src="https://js.entase.com/embed.js" async></script>
```

`obj` vincula a configuração ao respectivo contêiner: o widget é renderizado no elemento cujo id é `entase_` seguido pelo mesmo código. Se esse elemento estiver ausente, o widget registra um aviso e não renderiza nada.

Adicione uma entrada para cada widget para inserir vários deles em uma página.

| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| `obj` | string | – | O código do objeto do seu snippet de incorporação. Obrigatório. |
| `width` | string | `'auto'` | Largura do contêiner como um valor CSS. `'auto'` significa largura total. |
| `height` | string | `'auto'` | Altura do contêiner como um valor CSS. `'auto'` começa em 200px, e o widget redimensiona a si próprio para se ajustar ao conteúdo. |
| `theme` | string | `'light'` | `'light'` ou `'dark'`. |
| `locale` | string | `'auto'` | Idioma do widget. `'auto'` lê o atributo `lang` do seu elemento `<html>`. |
| `ext` | boolean | `false` | Layout estendido – adiciona o nome e o cartaz do evento acima das datas. |
| `attribution` | boolean | `true` | Exibe a linha de atribuição da Entase. Defina como `false` para ocultá-la. |
| `client` | object | `{}` | Opções transmitidas ao cliente JavaScript que abre o checkout. |

O contêiner recebe uma largura mínima de 200px, independentemente de `width`; abaixo disso, o widget não consegue ser disposto corretamente.

## Configurar o checkout

`client` aceita as mesmas opções do construtor do cliente, portanto o checkout aberto a partir de um widget pode ser estilizado e dimensionado como um que você abre diretamente:

```js
window.entase.o.push({
  obj: 'OBJ_CODE',
  client: {
    checkoutMode: 'pane',
    pane: { width: '60vw' },
    backdrop: true,
    backdropColor: '#101014'
  }
});
```

Consulte [Opções do construtor](/developers/js-client/constructor-options.md) para ver a lista completa.

Dois cuidados. `tprm` é definido pelo próprio widget a partir do URL da página (veja abaixo), portanto um valor transmitido aqui é substituído. Além disso, quando vários widgets compartilham uma página, eles compartilham uma instância de cliente – as opções de `client` do último widget inicializado são as que ficam em vigor. Portanto, mantenha-as idênticas em todos os widgets da mesma página.

## Encaminhamento automático de campanhas

Diferentemente do cliente independente, o widget lê a string de consulta da sua página e encaminha parâmetros de campanha conhecidos tanto para o widget quanto para o checkout:

`sgm`, `utm_source`, `utm_medium`, `utm_campaign`, `utm_term`, `utm_content`, `utm_id`, `utm_source_platform`, `utm_creative_format`, `fbclid`

Um visitante que chega a `yoursite.com/concert?utm_source=facebook&sgm=SOCIAL` tem essa atribuição registrada em qualquer pedido resultante, sem necessidade de configuração adicional. Parâmetros fora desta lista são ignorados – para incluir os seus próprios, abra o checkout diretamente com o cliente e defina você mesmo `tprm`. Consulte [Rastreamento e consentimento](/developers/js-client/tracking-and-consent.md).
