Didomi - Developers documentation
  • Introduction
  • SDKs
    • Introduction
    • Web SDK
      • Getting started
      • Tags and vendors management
        • Tags management
          • Events & Variables
            • Deprecated
            • Custom events
          • Tag managers
            • Adobe Launch/DTM
            • Eulerian
            • Google Tag Manager
              • Configure the Didomi / GTM integration
              • Didomi's GTM template
            • Tealium
            • Other tag managers
        • Custom Didomi <script> tags
        • Third-party integrations
          • Google Ad Manager / AdSense
            • GDPR via Non-Personalized Ads
              • Share consent and load/refresh ads
              • Share consent without loading or refreshing ads
            • US states laws
          • Google Consent Mode V2
          • Kameleoon
          • Piano Analytics (AT Internet)
          • Prebid
            • GDPR via IAB TCF
            • US states laws
          • Salesforce DMP (Krux)
        • IAB frameworks
        • Programmatic API
      • Configuration
        • Bots (SEO & Performance tools)
        • Configuration by URL
        • Cookies and storage
        • Custom domains for events
        • Notice
          • Behavior
          • Interactions
          • Look and feel
        • Preferences
        • Theme
      • AB tests
      • Custom domain
        • Domain delegation
        • Reverse proxy
      • Share consents between domains
      • Share consents across devices
      • Pass user choices in query string
      • Serve Didomi assets from your domain
      • Reference
        • API
          • Deprecated
        • Events
      • Performance
    • Mobile and TV SDKs
      • Android and Android TV
        • Setup
        • Logging
        • Reference
          • API
            • Deprecated
          • Events
        • Versions
      • iOS and tvOS
        • Setup
        • Logging
        • App Tracking Transparency (iOS 14.5+)
        • Reference
          • API
            • Deprecated
          • Events
        • Versions
      • Unity
        • Setup
        • Reference
        • Versions
        • Troubleshooting
      • React Native
        • Setup
        • Reference
          • Deprecated
        • Versions
      • Flutter
        • Setup
        • Reference
        • Versions
      • Consent notice
        • Getting started
        • Customize the notice
        • Customize the preferences popup
        • Customize the theme & UI
        • Load notice by ID
      • Third-party SDKs
      • Share consents across devices
      • Share consent with WebViews
      • Google Consent Mode v2
      • FAQ
    • AMP SDK
      • Blocking Behaviors
        • Load immediately on page load
        • Load only after consent (positive or negative)
        • Load only after positive consent
      • Consent status for vendors
    • Help & Support
  • API
    • Introduction
      • Authentication
      • Errors
      • Pagination
      • Filters
      • Caching
      • Rate limiting
      • Quotas
      • Translations
    • Data Manager
      • Regulations
      • Configuration Tree
      • Purposes
        • Purposes & Vendors Numerical IDs
      • Preferences Library
      • User Rights
    • Widgets
      • Consent notices
        • Notices
        • Configurations
        • Multi-Regulation Configurations
          • Migration of Existing Notices and API Updates
        • Deployments
        • Tutorials
          • Create and publish a consent notice
          • Create and publish a multi-regulation consent notice
      • Privacy widgets
        • Create a widget
        • Retrieve widgets
        • Edit a widget
          • Content & Design
            • Themes & Shapes
            • Components
              • auth
              • dsar_form
              • footer
              • header
              • preference
              • preference_value
              • save
              • section
              • sections
            • Options
          • Purposes & preferences
          • Settings
        • Deploy a Widget
          • Use your own subdomain
          • Use your own domain
          • Implement an embeddable widget on your website
        • Authentication
          • Manage authentication providers
          • Authenticate your end-user
        • Archive a widget
        • Headless widgets
          • Public Methods
          • Custom elements
          • Custom events
          • Event listeners
        • Tutorial
          • Launch a Preference Center from a mobile app
    • Compliance Reports
      • Properties
      • Reports
      • CSV format reference
      • Websites
    • Consents and Preferences
      • Events
        • Generate IAB TCF consent string
      • Links
      • Proofs
      • Tokens
      • Secrets
      • Users
      • Tutorial
        • Collect and operate data
    • Privacy Requests
      • Requests
      • Notes
      • Links
      • Emails
  • Integrations
    • Introduction
      • Quotas
    • Generic integrations
      • Batch export
        • Destinations
          • AWS S3 Bucket (owned by Didomi)
          • GCP Storage Bucket
        • Exported data
          • Notices consents
        • Logs
      • Webhooks
      • Batch import
      • Analytics export
        • Destinations
          • AWS S3 Bucket (owned by Didomi)
          • GCP Storage Bucket
    • Third-party apps
      • CMP integrations
        • Didomi-mParticle integration for your CMP
        • Deploy Didomi’s SDK for your Adobe Commerce website
      • Preference Management Platform integrations
        • Actito
        • Adobe Campaign Classic
        • Adobe Experience Cloud
        • Adobe Marketo Engage
        • Adobe Source Connector
        • Braze
        • Dotdigital
        • Hubspot
        • Mailchimp
        • Microsoft Dynamics 365
        • Salesforce Marketing Cloud
        • Salesforce Sales & Service Cloud
        • Selligent
        • Brevo (ex Sendinblue)
    • Tutorials
      • Configure a HTTP webhook
      • Configure a batch export
      • Configure an analytics export
    • Emailing
      • Configurations
        • Actito Email
        • Actito SMS
        • Adobe Campaign Classic
        • Adobe Campaign Standard
      • Emails
        • Templates
        • Manage your templates
Powered by GitBook
On this page
  1. API
  2. Widgets
  3. Privacy widgets
  4. Edit a widget
  5. Content & Design
  6. Components

auth

Widget ❌ Theme ✅ Options ✅ Content & Translations

This component is not a layout-component but componentOptions in the auth object at widget level.

To edit the Look & Feel of the Login Modal, send a PATCH request on /widgets/{id} and specify the following options in the componentOptions object property:

Common to One-Time Password and Magic Link Login modals

Option
Description
Example

backgroundColor

Button background and link color

color

Button text color

modal

Style of the Login Modal and the container (box)

image

Logo in the Login Modal

incorrectEmailText

Error message in case of invalid format of email address prompted (By default * Your email address is incorrect).

titleText

Title of Login modal (By default * Manage your consents)

stepOneGuideLineText

Second title of Login modal in email address step (By default * Please login in)

OTP Login modal

Option
Description
Example

otpLoginResendLink

Container of send a new code (<a>).

sendNewCodeButtonText

Text of button to send a new code.

otpLoginDescriptionStepTwo

Description above the code input to guide the user.

codeNotValidErrorMessage

Error message displayed to the user when the code prompted is not valid.

verifyCodeButton

Button in step 2 to submit the code.

otpLoginDescriptionStepOne

Description above the email input to guide the user.

authButton

loader

Loader in the submit button displayed when waiting for response.

descriptionTextWrapper

Container of description text positioned above email and code inputs.

codeFormFieldOptions

Code input options.

emailFormFieldOptions

Email address input options.

Magic Link Login modal

Option
Description
Example

resendEmailText

Text button to re-send email

linkSentInfoText

Email sent confirmation (By default * A link to manage your consents has been sent to you, please check your email address. Haven't received anything? )

stepTwoGuideLineText

Secondary title of Login modal in confirmation step (By default * A link is on it's way)

inputLabelText

Label of email input (By default * Email address)

* Available by default if SDK is used. When building the authentication workflow with Didomi APIs, translations from SDK will not be available.

PATCH https://api.didomi.io/widgets/{id}?organization_id=YOUR_ORG_ID

{
  "auth": {
      "method": "email",
      "providerId": "",
      "componentOptions": {
          "backgroundColor": "",
          "color": "",
          "modal": {
              "style": {
                  "default": {
                      "backgroundColor": "",
                      "padding": "",
                      "borderRadius": "",
                      "borderWidth": ""
                  }
              },
              "box": {
                  "style": {
                      "default": {
                          "backgroundColor": "",
                          "padding": "",
                          "borderRadius": "",
                          "borderWidth": ""
                      }
                  }                    
              }
          },
          "image": {
              "src": "",
              "style": {
                      "default": {
                          "width": "",
                          "height": ""
                      }
              }           
          },
          "incorrectEmailText": {
              "style": {
                  "default": {
                      "color": "",
                      "fontSize": ""
                  }
              }
          },
          "inputLabelText": {
              "style": {
                  "default": {
                      "color": "",
                      "fontSize": ""
                  }
              }                
          },
          "titleText": {
              "style": {
                  "default": {
                      "color": "",
                      "fontSize": ""
                  }
              }                
          },
          "stepOneGuideLineText": {
              "style": {
                  "default": {
                      "color": "",
                      "fontSize": ""
                  }
              }                
          },
          "otpLoginResendLink": {
              "style": {
                  "default": {
                      "color": "",
                      "fontSize": ""
                  }
              }                       
          },
          "sendNewCodeButtonText": {
              "style": {
                  "default": {
                      "color": "",
                      "fontSize": ""
                  }
              }                
          },
          "otpLoginDescriptionStepTwo": {
              "style": {
                  "default": {
                      "color": "",
                      "fontSize": ""
                  }
              }                
          },
          "codeNotValidErrorMessage": {
              "style": {
                  "default": {
                      "color": "",
                      "fontSize": ""
                  }
              }                
          },
          "verifyCodeButton": {
              "style": {
                  "default": {
                  "backgroundColor": "",
                  "padding": "",
                  "borderRadius": ""
                  }
              },
              "text": {
                  "style": {
                      "default": {
                          "color": "",
                          "fontSize": ""
                      }
                  }
              }                
          },
          "otpLoginDescriptionStepOne": {
              "style": {
                  "default": {
                      "color": "",
                      "fontSize": ""
                  }
              }              
          },
          "authButton": {
              "style": {
                  "default": {
                  "backgroundColor": "",
                  "padding": "",
                  "borderRadius": ""
                  }
              },
              "text": {
                  "style": {
                      "default": {
                          "color": "",
                          "fontSize": ""
                      }
                  }
              }                
          },
          "descriptionTextWrapper": {
              "style": {
                  "default": {
                      "backgroundColor": ""
                  }
              }                
          },
          "codeFormFieldOptions": {
              "label": {
                  "style": {
                      "default": {
                          "color": ""
                      }                
                  }
              },
              "errorMessage": {
                  "style": {
                      "default": {
                          "color": ""
                      }                
                  }                
              },
              "inputOptions": {
                  "fontColor": "",
                  "fontSize": "",
                  "fontWeight": "",
                  "lineHeight": "",
                  "borderRadius": "",
                  "borderColor": "",
                  "borderWidth": "",
                  "errorBorderColor": "",
                  "placeholderColor": "",
                  "backgroundColor": ""
              }                
          },
          "emailFormFieldOptions": {
              "label": {
                  "style": {
                      "default": {
                          "color": ""
                      }                
                  }
              },
              "errorMessage": {
                  "style": {
                      "default": {
                          "color": ""
                      }                
                  }                
              },
              "inputOptions": {
                  "fontColor": "",
                  "fontSize": "",
                  "fontWeight": "",
                  "lineHeight": "",
                  "borderRadius": "",
                  "borderColor": "",
                  "borderWidth": "",
                  "errorBorderColor": "",
                  "placeholderColor": "",
                  "backgroundColor": ""
              }
          }
      },
      "hideIfNotAuthenticated": false
  }
}
PreviousComponentsNextdsar_form

Last updated 1 year ago

ComponentOptionValue
ComponentOptionValue
DidomiStyle
DidomiStyle
DidomiTextOptions
DidomiTextOptions
DidomiTextOptions
DidomiStyle
DidomiTextOptions
DidomiTextOptions
DidomiTextOptions
DidomiButtonOptions
DidomiTextOptions
DidomiButtonOptions
DidomiStyle
DidomiStyle
DidomiFormFieldsOptions
DidomiFormFieldsOptions
DidomiTextOptions
DidomiTextOptions
DidomiTextOptions
DidomiTextOptions