# Look and feel
## Languages
Our SDK supports multiple languages out-of-the-box with translations for all our standard messages. See below if your website uses other languages.\
English is the default language: if a visitor does not use a supported language, the banner and popups will be displayed in English.
You do not need to do anything to use Didomi's languages. However, you can choose to enable only certain languages and set up a different default language.\
Set the `languages.enabled` property to your list of supported languages and `languages.default` property as the default language in case the customer language is not supported:
```javascript
```
By default, `enabled` is the list of supported languages by Didomi and `default` is `en`. You can support different languages by changing the English texts and setting English as the only enabled language.
{% hint style="info" %}
We currently support [this list of languages](https://developers.didomi.io/api-and-platform/introduction/translations#languages-supported).
{% endhint %}
### **Language direction**
The Didomi SDK adapts to the text direction of your website by default, inheriting the `dir` attribute from its parent elements, typically the `` or `` tag. This ensures compatibility with the overall layout of your site.
To understand more about the HTML `dir` attribute please refer to
#### **Overriding language direction**
If you need the Didomi notice to have a different text direction from the rest of your website, you can override it with custom CSS.
The Didomi notice is rendered in a `div` element with ID `didomi-host` that contains:
* a `lang` attribute to identify the language on the notice
* a `data-lang-dir` attribute with the suggested direction to use for the language applied
Example of HTML generated by the Didomi SDK for a notice in Arabic:
```html
...
```
With these attributes you can apply CSS rules like:
```css
/* Target a single language */
#didomi-host[lang="ar"] {
direction: rtl;
}
/* Target all languages that are suggested as RTL */
#didomi-host[data-lang-dir="rtl"] {
direction: rtl;
}
```
## Theme
The SDK supports theming by providing a color that will be used across the interfaces (consent notice, popups, etc.) to make sure that our UIs match your brand colors.
The color that you provide should be the main color of your website, the one that appears most frequently.
```javascript
```
## Position
The notice can be displayed as a popup, a regular banner (top or bottom), a smaller banner or as a floating panel and can be positioned at different locations on the screen.
The `position` configuration parameter lets you define the position of the notice. The possible values are:
| Values | Description |
| --------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| `popup` | Display the notice as a full-screen popup. Also set your website logo and name to make sure the popup is personnalized. |
| panel-top-left
panel-top-right
panel-bottom-left
panel-bottom-right
| Display the notice as a small panel in one of the corners of the screen. `panel-bottom-right` is the default value. |
| top
bottom
| Display a banner notice at the top or the bottom of the screen |
| top-left
top-right
bottom-left
bottom-right
| Display a floating panel in a corner of the screen |
Examples:
{% tabs %}
{% tab title="Banner" %}
```javascript
```
{% endtab %}
{% tab title="Corner banner" %}
```javascript
```
{% endtab %}
{% tab title="Popup" %}
```javascript
```
{% endtab %}
{% tab title="Floating panel" %}
```javascript
```
{% endtab %}
{% endtabs %}
## **"Disagree and close" button**
By default, our notices display `Agree and close` and `Learn More` buttons. These allow users to give consent or get more information on the purposes and vendors that your website works with.
We also support displaying `Agree and close` and `Disagree and close` buttons directly in the notice:
To display those buttons, set the `notice.denyOptions.button` of your notice to `primary`
```javascript
window.didomiConfig = {
notice: {
denyOptions: {
button: 'primary',
}
}
};
```
This is supported for both banners (`bottom` or `top` positions) or pop-ins (`popup` position).
### Style of the "Disagree and close" button
In the example above the `Disagree and close` button is a primary button. To make it a secondary button, you can set the `notice.denyOptions.button` configuration option `secondary`:
```javascript
window.didomiConfig = {
notice: {
denyOptions: {
button: 'secondary',
}
}
};
```
To hide the `Disagree and close` button in the notice you can set `notice.denyOptions.button` to `none`.
{% hint style="danger" %}
Please note that the `denyAsPrimary` parameter is deprecated and should not be used for the styling of the "Disagree and close" button.
{% endhint %}
### "Continue without agreeing" link
A "Continue without agreeing" link can be displayed instead of the "Disagree and close" button in the `optin` notice type:
To show the "Continue without agreeing" link, set the `notice.denyOptions.link` value to `true`:
```javascript
window.didomiConfig = {
notice: {
denyOptions: {
button: 'secondary',
link: true,
}
}
};
```
The "Continue without agreeing" link behaves the same way as the "Disagree and close" button.
Please note that if `notice.denyOptions.link` is `true` then `notice.denyOptions.button` options will be ignored and only a link will be shown in the notice.
{% hint style="danger" %}
Please note that the `denyAsLink` parameter is deprecated and should not be used for the "Continue without agreeing" link configuration.
{% endhint %}
### **Cross button**
To comply with Italian regulation, you should add a cross button to the notice. To make the cross button appear in the notice set the `notice.denyOptions.cross` parameter value to `true`:
```javascript
window.didomiConfig = {
notice: {
denyOptions: {
cross: true,
link: true,
}
}
};
```
Please note that you can have both the “Disagree and close button” and the cross button in the same notice, for example:
```javascript
window.didomiConfig = {
notice: {
denyOptions: {
button: 'primary',
link: true,
}
}
};
```
### Configuring legitimate interest legal basis status
After clicking on the "Disagree and close" button or "Continue without agreeing" link in the optin notice, all purposes' and vendors' consents are disabled, and all purposes' and vendors' legitimate interests are enabled by default.
To disable legitimate interests as well after clicking on the "Disagree and close" button or "Continue without agreeing" link, `notice.denyAppliesToLI` should be set to `true` in the Didomi configuration object:
```javascript
window.didomiConfig = {
notice: {
type: 'optin',
denyAppliesToLI: true
}
};
```
## Close button
For notices with position `popup`, you can show a Close icon to allow users to ignore the notice until the next page:
To show the Close icon, set the `notice.canCloseAndIgnore` value to `true`:
```javascript
window.didomiConfig = {
notice: {
canCloseAndIgnore: true,
position: 'popup',
type: 'optin'
}
};
```
## Text alignment
You can change the alignment of the text inside the notice. The options are `left`, `right`, `center` and `justify`. By default, the text is aligned to the `left`.
Example:
```javascript
```
## Logo alignment
You can change the alignment of the logo inside the notice. The options are the one available for the CSS property [align-self](https://www.w3schools.com/cssref/css3_pr_align-self.asp). So for example to align it to the left, the value would be `flex-start` and to the right `flex-end`. By default, the logo is aligned to the `center`.
Example:
```javascript
```
## Buttons
### Order
You can change the order of the buttons inside the notice. By default `learnMorePosition` is `null` and the "learn more" button is displayed before the "agree" button on the regular notice and after on the popup notice.
The options are `before` and `after`.
Example:
```javascript
```
### Margins
You can set the margins of the "learn more" button on the popup notice.
The options are based on the CSS `margin` property.
Example:
```javascript
```
## Texts
You can change some of the texts of the consent notice:
| Configuration Key | Description |
| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `notice.content.dismiss` | "Agree & Close" button |
| `notice.content.deny` | "Decline" button |
| `notice.content.learnMore` | "Learn More" button |
| `notice.content.subTextPopup` | Message below the "Learn more" button in the popup. This is only used if you are using a popup and not for banners or floating panels. |
Example:
```javascript
```
Note that you should provide translations for all the languages that your website supports. We provide translations for all our standard messages.
#### Move the vendors link in your banner to your custom text
If you want to move the vendor link to your custom text `notice.content.notice` instead of having a separate link, you can use the function `Didomi.preferences.show('vendors')` to open the preference popup. The original link will be automatically replaced.
```markup
View partners
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://developers.didomi.io/cmp/web-sdk/consent-notice/notice/look-and-feel.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.