White Label

Are you interested in enabling Whitelabel for your business?

Whitelabel is paid feature, please reach out to our Sales Team for more information on how to proceed.

The Switch Dashboard can be rebranded to match your brand. Within Whitelabel Settings you are able to define which components should be styled and how they should be configured. Whitelabels are devised to aid acquirers/PSPs/gateways/ISVs in displaying their own unique brand to their associated submerchants.

Currently, the Switch Dashboard elements available for changes under Whitelabel settings are logotypes, color scheme, favicons, and links to external sources.

Element	Description
Logotype	All logotype images in the Dashboard can be changed to fit the brand.
Color Scheme	Changes to the colors displayed in buttons, backgrounds, notifications and critical information are available for further customization.
Browser Features	Favicon options and text displayed on tabs and address bars can be made to fit the client’s navigation needs.
External Hyperlinks	Links to external resources can be added to the sidebar as means to complement the client’s use of the Switch Dashboard.

Logotype

Logotypes are displayed upon login into the Dashboard and also when loading the next screen. These can be formatted to figure the merchant logo instead of the Switch brand. It is important to keep in mind that the logo should have the appropriate dimensions, resolution, and color scheme to be properly displayed in the login screen background.

ADD LOADING LOGOTYPE
    "logos": {
            "splash": "assets/img/yourlogo.png"
    }

After login, users can see the chosen logo on the upper left corner of the Dashboard. Currently, this is the only instance where the logo is displayed inside the platform. For application in the Switch Dashboard it is recommended a logo with a horizontal layout, height: 150px and width: 500px.

ADD LOGOTYPE
    "images": {
            "image_sidebar_logo": "assets/img/yourlogo.png",
            "image_sidebar_logo_light": "assets/img/yourlogo.png"
    }

Color Scheme

The color scheme whitelabel options are designed to put the client’s identity front and center by allowing the user to explore multiple color palette applications. Additionally, color can be an effective tool to highlight important information, this is particularly relevant in the Analytics section.

Customizable options were devised to give options to the user while keeping the Dashboard’s design integrity and functionality.

SETTING COLOR SCHEME
    "colors": {
             "primary_color": "#8578D0",
             "on_primary_color": "#FFFFFF",
             "background_color": "#F9F9FA",
             "success_color": "#8CBA93",
             "warning_color": "#DDB05F",
             "error_color": "#BC5555",
             “button_color”: “#3C3C51”
    }

Buttons and Icons

The color of icons on the main menu on the left is defined as the button_color. Buttons, namely the ones displayed on the top right corner of the Dashboard also change color according to the value set on button_color. The text displayed on top of these buttons can go through a color change using on_primary_color.

Background

The Switch Dashboard includes two display levels. The background displays basic features like the menu options and titles for sections. At surface level, there is actionable information for the user, namely in dropdown menus and pop-ups. You can make changes to the background_color so it better fits your brand.

Status

The status of transactions is highlighted in a particular color to make it stand out. You can define different colors for a success status (e.g. confirmed, authorized, success) and an error status update (e.g. invalid), just use success_color and error_color.

Warnings

warning_color is important when it comes to highlighting warnings and notifications on your dashboard. To immediately spot a problem that requires action in the transactions section is very relevant.

Whatever the color scheme users find fit for the Dashboard, it is important to pay particular attention to Warnings and Error display colors. The notifications in these sections usually need immediate attention and should standout amongst all the other Dashboard information.

Browser Features

Favicons allow the display of a brand in the browser’s tabs, bookmarks and history, allowing users to tab back and forth between the Dashboard and other sites quicker. It is also possible to change the HTML title to fit your brand.

ADD FAVICON
  "javascript": {
              "client_name": "[Client name]",
              "logos": {
                     "android_favicon_192x192": "[image path/location]",
                     "apple_favicon_180x180": "assets/img/favicon.png",
                     "favicon": "assets/img/favicon.png",
                     "favicon_16x16": "assets/img/favicon.png",
                     "favicon_32x32": "assets/img/favicon.png",
                     "favicon_96x96": "assets/img/favicon.png",
                     "splash": "assets/img/yourlogo.png"
              }
  }

External Hyperlinks

It is possible to add links to the bottom menu button. These should be used sparsely to ease user’s access to external information that is relevant to their work, including other company resources or relevant policies. A more extensive list of external links can be added under extra in the links field.

ADD EXTERNAL LINKS
    "links": {
           "documentation": "https://switchpayments.com/docs",
           "support": "mailto:support@switchpayments.com",
           “extra”: [
                  "example": "https://example.com"
           ]
    }

It is best to stick to important hyperlinks in this section so as not to crowd the menu with unnecessary information. A maximum number of three additional links is advisable.

Configuring the Whitelabel

The option to activate the Whitelabel settings can be found on the Merchants page. Select this option under Edit Merchant. The Whitelabel configurations can be accessed on the Dashboard under Settings where you can create a new Whitabel Setting. Find below a JSON example of what can be imputed on the Dashboard Config text box.

WHITELABEL EXAMPLE
    {
       "css": {
            "colors": {
                    "primary_color": "#8578D0",
                    "on_primary_color": "#FFFFFF",
                    "background_color": "#F9F9FA",
                    "success_color": "#8CBA93",
                    "warning_color": "#DDB05F",
                    "error_color": "#BC5555",
                    “button_color”: “#3C3C51”
            },
            "images": {
                    "image_sidebar_logo": "assets/img/yourlogo.png",
                    "image_sidebar_logo_light": "assets/img/yourlogo.png"
            },
            "javascript": {
                        "client_name": "[Client name]",
                        "logos": {
                           "android_favicon_192x192": "[image path/location]",
                           "apple_favicon_180x180": "assets/img/favicon.png",
                           "favicon": "assets/img/favicon.png",
                           "favicon_16x16": "assets/img/favicon.png",
                           "favicon_32x32": "assets/img/favicon.png",
                           "favicon_96x96": "assets/img/favicon.png",
                           "splash": "assets/img/yourlogo.png"
                        }
            },
            "links": {
                   "documentation": "https://switchpayments.com/docs",
                   "support": "mailto:support@switchpayments.com"
            }
       }
    }