Customization
      Back to home
      1. Fittingbox - Customer Help Center
      2. PD Measurement
      3. Customization

      How to customize the product according to my brand colors?

      When you embed the code, you can update some parameters to change the colors of the theme.

      Theme Dark or Light 


      Choose betwin Dark or Light mode as a parameter for a quick and simple fit to your website colors

       

      To implement, all you have to do is to add a darkTheme parameter
      please refer to Integration Article to setup this parameter : How to integrate API PD Measurement?

       

      Thanks to the hereafter CodePen : Dive into the full PD Measurement rendering here afeter and switch between the two modes by clicing on the toogle button "Set Light mode" / or "Set Dark mode"

       

      Full colors customization 

      Customize all colors of the app to a perfect fit to your brand

      • background (dark or light)
      • font colors
      • buttons colors

      To implement, read this full article and then please refer to Integration Article : How to integrate API PD Measurement?

      Try colors customization with the CodePen at the end of this article.

      Examples

      To go deeper in details and acces to higher customization, see next section "How it works"

      • Your primaries colors of your website are Yellow & Black

      set the following parameters 

      Parameter value
      darkMode true
       theme: { mainColor } #FFB706
       


      • Your primaries colors of your website are white & Black

      set the following parameters 

      Parameter value
      darkMode false
      theme: { mainColor } #181B1C

      How it works

      • First, set a Mode Dark or Light , it will define the basis of your customization
        Note:  Theme parameter is mandatory to customize hereafter colors
        • Background color is linked to the Mode and is not customizable
      • Then, modifiy the hereafter parameters colors to fit to your wishes

      Note : if missing one of those color parameters. the deflaut color from the mode selected is applied. 

      • “mainColor”  is the primary color.
        it is the main text and buttons background color. Also applied on the drawings.
        You can customize and set your proper value to changes on whole application.
        Note: dark mode default color = #6CB4CC / light mode default color = #6CB4CC

      • “instructionColor” is the text instructions above the video stream
         You can customize and set your proper value to changes on whole application.
        Note: dark mode par defaut = #FFFFFF/ light mode par defaut =#181B1C

      • “buttonTextColor” is the font color of each CTA buttons
        You can customize and set your proper value to changes on whole application.
        Note: dark mode default color = #181B1C/ light mode default color = #FFFFFF

      • Validation colors :
        Are the 3 colors parameters, by default green, orange, red, used to symbolise the
        achievement graduation.

        You can customize them and set your proper value to changes on whole application.

        • “colorValid” : color to symbolise "validated"
          Note: dark mode default color = #78C700/ light mode default color = #78C700

        • “colorMid” : color to symbolise "close to, but not validated"
          Note: dark mode default color = #FFA400/ light mode default color = #FFA400

        • “colorWrong” : color to symbolise "not validated"
          Note: dark mode default color = #FF0000/ light mode default color = #FF0000

      CodePen

       

      See the Pen msrt-theming by Fittingbox (@Fittingbox) on CodePen.