Object adoptChangeClasses

To change the styles of component classes, you need to send the window.adoptChangeClasses object in the JavaScript script with the following format:

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

In the code above you can see that there are 2 internal properties which are styles and hasImportant.

• styles: This is the object where the CSS properties of the classes are inserted and are separated into 2 more levels, which are web and mobile. It is possible to customize them according to the responsiveness of the screen.

• hasImportant: It is a property of the **boolean ** type which is responsible for allowing or not allowing the classes to be overwritten by global styles of the site, through the use of the CSS "! important" attribute. By default it has the value true, i.e., if the user decides to allow the global styles of his site to override or influence the tag's classes, he must set the value false in this property.

The tag has been separated into 4 main components which have their own specific classes:

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

Below is the format of the complete object with all the existing class names for customization:

{
  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: {}
      }
    }
  },
  hasImportant: true
}

CSS properties must be inserted in CamelCase format. Here are some examples:

• background-color should be backgroundColor
• font-size should be fontSize
• border-radius should be borderRadius and so on...

Here are some examples to help you explore the many possibilities offered by our tag. Below, we highlight use cases for the class API and its capabilities.

Button customization is achieved by manipulating CSS attributes. This allows you to adjust the border radius, inner paddings, font size, colors, hover effects, and more.

Using CSS attributes, you can edit and enhance the layout of your modal. This includes adding scroll bars, modifying paddings, alignments, sizes, and colors, giving you flexible control over the visual presentation of your modal.