Customização de classes
Configuração de logon único SAML
Webhooks
Aplicativos Mobile

Objeto adoptChangeClasses

Para alterar os estilos das classes dos componentes, é necessário enviar o objeto window.adoptChangeClasses no script Javascript com o seguinte formato:

  window.adoptChangeClasses = {
      styles: {
        web: {},
        mobile: {}
      },
      hasImportant: true,
      theme: 'light'
  }

No código acima é possível visualizar que existem 3 propriedades internas que são os styles, hasImportant e theme.

  • styles: É o objeto onde são inseridos as propriedades CSS das classes e estão separados em mais 2 níveis, que são o web e mobile. Onde é possível realizar customizações diferentes conforme a responsividade da tela.

  • hasImportant: É uma propriedade do tipo boolean que é responsável por permitir ou não permitir que as classes sejam sobrescrevidas por estilos globais do site, através do uso do atributo "! important" do CSS. Por padrão ela possui o valor true, ou seja, se o usuário decidir permitir que os estilos globais de seu site sobrescrevam ou influenciem nas classes da tag, ele deverá setar o valor false nessa propriedade.

  • theme: É uma propriedade onde é selecionado o tema de cores da tag, entre "light" e "dark".


A tag foi separada em 4 principais componentes aos quais possuem suas classes específicas:

  1. controller
  2. card
  3. preferenceCard
  4. categories

Abaixo segue o formato do objeto completo com todos os nomes das classes existentes para customização:

{
  styles: {
    web: {
      controller: {
        button: {},
      },
      card: {
        container: {},
        content: {},
        textContainer: {},
        titleRow: {},
        whiteLabelLogo: {},
        adoptLink: {},
        textsRow: {},
        textRowContent: {},
        textRowLinks: {},
        buttonsContainer: {},
        rejectAllLink: {},
        rejectAllButton: {},
        preferencesButton: {},
        acceptAllButton: {}
      },
      preferenceCard: {
        panel: {},
        title: {},
        closePanel: {},
        tagCategories: {},
        cardFooter: {},
        smallTextFooter: {},
        buttonsContainer: {},
        rejectButton: {},
        acceptButton: {}
      },
      categories: {
        category: {},
        title: {},
        icon: {},
        description: {},
        toogleShowTags: {},
        tag: {},
        tagTitleSection: {},
        tagTitle: {},
        tagCookieContainer: {},
        tagCleanCacheLink: {}
      }
    },
    mobile: {
      controller: {
        button: {},
      },
      card: {
        container: {},
        content: {},
        textContainer: {},
        titleRow: {},
        whiteLabelLogo: {},
        adoptLink: {},
        textsRow: {},
        textRowContent: {},
        textRowLinks: {},
        buttonsContainer: {},
        rejectAllLink: {},
        rejectAllButton: {},
        preferencesButton: {},
        acceptAllButton: {}
      },
      preferenceCard: {
        panel: {},
        title: {},
        closePanel: {},
        tagCategories: {},
        cardFooter: {},
        smallTextFooter: {},
        buttonsContainer: {},
        rejectButton: {},
        acceptButton: {}
      },
      categories: {
        category: {},
        title: {},
        icon: {},
        description: {},
        toogleShowTags: {},
        tag: {},
        tagTitleSection: {},
        tagTitle: {},
        tagCookieContainer: {},
        tagCleanCacheLink: {}
      }
    }
  },
 }

As propriedades CSS devem ser inseridas em formato CamelCase. Segue alguns exemplos:

  • background-color deverá ser backgroundColor
  • font-size deverá ser fontSize
  • border-radius deverá ser borderRadius e assim por diante...
Logo

AdOpt

Recursos

Termos Legais

© AdOpt desde 2020 • Feito por pessoas que amam.

🍪