> ## Documentation Index
> Fetch the complete documentation index at: https://help.revenuehero.io/llms.txt
> Use this file to discover all available pages before exploring further.

# How to customize your Widget?

> Customize how your scheduler loads, looks and feels. Let the Picasso in you run wild.

If you're an administrator, you can customize the RevenueHero booking widget to match your organization's branding.

## Navigate to Branding

You can access the **Branding** section by heading to "**Settings**" from the left navigation menu and by clicking on "**Branding**" under the "**Organization Settings**".

<Frame>
  <img src="https://mintcdn.com/revenuehero/YW8anQK7te6xhdVR/images/branding_new_1.png?fit=max&auto=format&n=YW8anQK7te6xhdVR&q=85&s=e31ee0e3d4e429bb5dc61b9d20757c33" alt="Branding Navigation" width="2940" height="1668" data-path="images/branding_new_1.png" />
</Frame>

You can access the following:

1. Themes - to customize the look and feel of the scheduling widget.
2. Meta Info - customize the description and meta info that goes along with your organtization's meeting links.
3. Scheduler Settings - Choose time format and widget redirection timer.

<Tabs>
  <Tab title="Themes">
    ## Select your theme

    Pick the theme that best suits your organization's design language. We've 6 unique themes that you can choose from to make your scheduler look chic.

    #### Classic

    <Frame>
      <img src="https://mintcdn.com/revenuehero/YW8anQK7te6xhdVR/images/branding_new_2.png?fit=max&auto=format&n=YW8anQK7te6xhdVR&q=85&s=e05d108dd4ce9f68989d98b440b8e542" alt="Classic Theme" width="2444" height="1232" data-path="images/branding_new_2.png" />
    </Frame>

    #### Sharp

    <Frame>
      <img src="https://mintcdn.com/revenuehero/YW8anQK7te6xhdVR/images/branding_new_3.png?fit=max&auto=format&n=YW8anQK7te6xhdVR&q=85&s=d5ff443967bdbdb6cd099dcf7a8a42ca" alt="Sharp Theme" width="2444" height="1232" data-path="images/branding_new_3.png" />
    </Frame>

    #### Frozen Glass

    <Frame>
      <img src="https://mintcdn.com/revenuehero/YW8anQK7te6xhdVR/images/branding_new_4.png?fit=max&auto=format&n=YW8anQK7te6xhdVR&q=85&s=b436468c2366b3ac254c19ce946ec68a" alt="Frozen Glass Theme" width="2444" height="1232" data-path="images/branding_new_4.png" />
    </Frame>

    #### Serenity

    <Frame>
      <img src="https://mintcdn.com/revenuehero/YW8anQK7te6xhdVR/images/branding_new_5.png?fit=max&auto=format&n=YW8anQK7te6xhdVR&q=85&s=28d715b4997638e7473ab69f901fda68" alt="Serenity Theme" width="2444" height="1232" data-path="images/branding_new_5.png" />
    </Frame>

    #### Retro

    <Frame>
      <img src="https://mintcdn.com/revenuehero/YW8anQK7te6xhdVR/images/branding_new_6.png?fit=max&auto=format&n=YW8anQK7te6xhdVR&q=85&s=39cd485c76717fefc9ad25edbde7f66d" alt="Retro Theme" width="2444" height="1232" data-path="images/branding_new_6.png" />
    </Frame>

    #### Terminal

    <Frame>
      <img src="https://mintcdn.com/revenuehero/YW8anQK7te6xhdVR/images/branding_new_7.png?fit=max&auto=format&n=YW8anQK7te6xhdVR&q=85&s=ba69ae55918dabfd5f59ca46a08aaf08" alt="Terminal Theme" width="2444" height="1232" data-path="images/branding_new_7.png" />
    </Frame>

    You can also toggle between light and darker themes using the icon highlighted in the screenshot in the top-right corner of the themes section.

    <Frame caption="Light themes">
      <img src="https://mintcdn.com/revenuehero/YW8anQK7te6xhdVR/images/branding_new_8.png?fit=max&auto=format&n=YW8anQK7te6xhdVR&q=85&s=ff1dc1e458c0b2d1d6ffdee07f116025" alt="Branding Navigation" width="2444" height="1244" data-path="images/branding_new_8.png" />
    </Frame>

    <br />

    <Frame caption="Dark themes">
      <img src="https://mintcdn.com/revenuehero/YW8anQK7te6xhdVR/images/branding_new_9.png?fit=max&auto=format&n=YW8anQK7te6xhdVR&q=85&s=bf3225fed1aebc5a70f63c7dc5473c82" alt="Branding Navigation" width="2940" height="1662" data-path="images/branding_new_9.png" />
    </Frame>

    ## Choose your colors

    You can configure the color scheme of the RevenueHero booking widget by using the color-picker option. A real-time preview of the color changes can be seen on the right.

    <Frame caption="Poor text visibility">
      <img src="https://mintcdn.com/revenuehero/YW8anQK7te6xhdVR/images/branding_new_10.png?fit=max&auto=format&n=YW8anQK7te6xhdVR&q=85&s=b1ab7dd1670ccc7b8acc1d9e17275726" alt="Branding Green Color" width="2444" height="1266" data-path="images/branding_new_10.png" />
    </Frame>

    <br />

    <Frame caption="Good text visibility">
      <img src="https://mintcdn.com/revenuehero/YW8anQK7te6xhdVR/images/branding_new_11.png?fit=max&auto=format&n=YW8anQK7te6xhdVR&q=85&s=32c4648ce05c869851aeaa7aea1681b1" alt="Branding Purple Color" width="2444" height="1266" data-path="images/branding_new_11.png" />
    </Frame>

    There's also a text visibility indicator that indicates the readability of text in chosen color based on a [standard measure](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html). You can see that for **Light Green**, the readability indication for **Poor**, whereas for **Purple** the readability indication was **Good** in the previous screenshots.

    <Frame>
      <img src="https://mintcdn.com/revenuehero/YW8anQK7te6xhdVR/images/branding_new_12.png?fit=max&auto=format&n=YW8anQK7te6xhdVR&q=85&s=ced1987b50e6a556aa40b35a355163ba" alt="Branding Text Vibility" width="2444" height="1266" data-path="images/branding_new_12.png" />
    </Frame>

    Your Organization's name and logo that you have updated in the "[Organization Details](/settings/organization/details)" section will be displayed on the booking widget.

    <Frame>
      <img src="https://mintcdn.com/revenuehero/YW8anQK7te6xhdVR/images/branding_new_13.png?fit=max&auto=format&n=YW8anQK7te6xhdVR&q=85&s=5d8870fa21acff14b2a641ad19caa28d" alt="Branding Preview" width="2884" height="1492" data-path="images/branding_new_13.png" />
    </Frame>
  </Tab>

  <Tab title="Meta Info">
    Add descriptions that would be added to previews for your meeting links.

    <Frame>
      <img src="https://mintcdn.com/revenuehero/YW8anQK7te6xhdVR/images/branding_meta_1.png?fit=max&auto=format&n=YW8anQK7te6xhdVR&q=85&s=15a2bf1f443696f5c962a052f5a69a4b" alt="Add meta info" width="2938" height="1664" data-path="images/branding_meta_1.png" />
    </Frame>
  </Tab>

  <Tab title="Scheduler Settings">
    **Time Format**

    Toggle between 12hr and 24hr format for your scheduler widgets.

    <Frame>
      <img src="https://mintcdn.com/revenuehero/YW8anQK7te6xhdVR/images/branding_scheduler_settings_1.png?fit=max&auto=format&n=YW8anQK7te6xhdVR&q=85&s=fb278b790c55a5d5e32cf4e1ec0233c2" alt="Add meta info" width="2940" height="1666" data-path="images/branding_scheduler_settings_1.png" />
    </Frame>

    **Redirection Timer**

    Set a duration to automatically redirect your prospects from the confirmation page to the [redirection page](/routers/inbound/create-inbound-router#redirection) of your choice.

    <Frame>
      <img src="https://mintcdn.com/revenuehero/YW8anQK7te6xhdVR/images/branding_scheduler_settings_2.png?fit=max&auto=format&n=YW8anQK7te6xhdVR&q=85&s=ff0a2ba9a832803aefb54449c8c09b0d" alt="Add meta info" width="2940" height="1666" data-path="images/branding_scheduler_settings_2.png" />
    </Frame>
  </Tab>
</Tabs>
