Whitelabeling a tenant

Whitelabeling is the term used for the branding of the product as requested by the client instead of the provider’s own branding. Thingshub allows branding and color theme customization under the Whitelabeling feature set.
Under this feature set following features are provided:

Color Theme: Modify the theme of the thingshub instance.
Tenant Alias: Modify the tenant name Alias.
Logo: Modify the tenant logo.
External Links: Add up to 3 custom links to the help option in the tenant menu and the login screen.

These modifications can be done by changing values in the tenant configuration files. For this purpose, a new whitelabeling section is added to the tenant configuration yaml file.

Configuring Whitelabeling Options:
Tenantconfig.yaml

CODE

global:
   ...
   
   whitelabeling:
    enabled: true                                 ## Enable or disable whitelabeling feature
    tenant_alias: "Ferrari"                       ## Configure Tenant Alias Name
    headlines_primary_text_color: "#000000"
    tenant_name_text_color: "red"
    buttons:
      primary:
        background_color: "#000000"
        text_color: ""
      secondary:
        background_color: "#FF0000"
        text_color: ""
    main_navigation:
      background_color: "#FF0000"
      tenant_name_background_color: "#000000"
      icons_color: "#FFFF00"
      menu:
        items_text_color: "#000000"
        items_text_color_hover: "#FFFF00"
        subitems_text_color: "#FF0000"
        subitems_text_color_hover: "#FFFF00"
    logo_light_base64_content: <base-64 encoded image file>  
    external_links:
      login_page:
        link1:
          url_de: "https://www.arsenalfc.de/"
          text_de: "Arsenal-Fußballverein"
          url_en: "https://www.arsenal.com/"
          text_en: "Arsenal Football club"
        link2:
          url_de: "https://www.mercedes-benz.de/?group=all&subgroup=see-all&view=BODYTYPE"
          text_de: "Mercedes-Benz Personenwagen"
          url_en: "https://www.mercedes-benz.com/en/"
          text_en: "Mercedes Benz passenger car"
        link3:
          url_de: "https://www.germany-visa.org/de/"
          text_de: "Deutschland visum einwanderung"
          url_en: "https://www.germany-visa.org/"
          text_en: "Germany visa immigration"
      help_menu:
        open_support_ticket_link:
          text_de: "Support Ticket bei Porsche öffnen"
          url_de: "https://help.smartmakers.io/de/support/home"
          text_en: "Open Support Ticket"
          url_en: "https://help.smartmakers.io/en/support/home"
        link1:
          url_de: "https://www.arsenalfc.de/"
          text_de: "Arsenal-Fußballverein"
          url_en: "https://www.arsenal.com/"
          text_en: "Arsenal Football club"
        link2:
          url_de: "https://www.mercedes-benz.de/?group=all&subgroup=see-all&view=BODYTYPE"
          text_de: "Mercedes-Benz Personenwagen"
          url_en: "https://www.mercedes-benz.com/en/"
          text_en: "Mercedes Benz passenger car"
        link3:
          url_de: "https://www.germany-visa.org/de/"
          text_de: "Deutschland visum einwanderung"
          url_en: "https://www.germany-visa.org/"
          text_en: "Germany visa immigration"
   
   ...

Mapping Options to UI:

tenant_alias:

tenant_name_text_color:

buttons:

main_navigation:

logo_light_base64_content:

external_links:

Base encoding logo:

Go to the site: https://base64.guru/converter/encode/image
Upload the logo image.
Select Data URI -- data:content/type;base64 from the output format dropdown.
Click on the Encode image to Base64 button.
Copy the result and paste it into the logo_light_base64_content: section of the whitelableing object in the tenant configuration file.