Skip to main content
Skip table of contents

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:

  1. Go to the site: https://base64.guru/converter/encode/image

  2. Upload the logo image.

  3. Select Data URI -- data:content/type;base64 from the output format dropdown.

  4. Click on the Encode image to Base64 button.

  5. Copy the result and paste it into the logo_light_base64_content: section of the whitelableing object in the tenant configuration file.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.