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

# How Do I Customize My Gameball Customer Widget to Match My Brand?

> Learn how to customize Gameball customer profile widget style and colors to match your website/app branding.

## Plan Availability

<Tabs>
  <Tab title="Shopify & Salla">
    | Feature                                 | Plan      |
    | --------------------------------------- | --------- |
    | Basic customization                     | All plans |
    | Theme, Font, Points/Score names & icons | Pro, Guru |
    | Guest widget image                      | Pro, Guru |
  </Tab>

  <Tab title="Non-Platform">
    | Feature                                 | Plan               |
    | --------------------------------------- | ------------------ |
    | Basic customization                     | Growth, Enterprise |
    | Theme, Font, Points/Score names & icons | Growth, Enterprise |
    | Guest widget image                      | Growth, Enterprise |
  </Tab>
</Tabs>

When your loyalty widget feels out of place on your platform, customers may perceive it as intrusive or untrustworthy. That's why customizing the widget to align with your brand's identity is essential for increasing engagement and trust. Here are detailed steps for how to customize your entire widget to match your brand's theme.

***

## Colors

To brand your Gameball customer widget to match your website or app, go to the **Gameball Admin Dashboard** and navigate to **Widget > Branding: Colors**.

<Frame>
  <img src="https://mintcdn.com/gameball/qQadqvPdUG22Jh8m/images/product-docs/customer-widget/branding-colors-section.png?fit=max&auto=format&n=qQadqvPdUG22Jh8m&q=85&s=62ed4c200bd1953edd5ec8dd265af409" alt="Branding colors section in widget settings" width="2714" height="1430" data-path="images/product-docs/customer-widget/branding-colors-section.png" />
</Frame>

<AccordionGroup>
  <Accordion title="Theme" icon="circle-half-stroke">
    **Available on:** Shopify & Salla Pro/Guru | Non-platform Growth/Enterprise

    Choose between two modes:

    * **Light:** Light mode is the default mode unless set otherwise.
    * **Dark:** The main layout color will change to black.

    <Frame>
      <img src="https://mintcdn.com/gameball/15226X8FGoPfo47L/images/product-docs/customer-widget/theme-light-dark-modes.png?fit=max&auto=format&n=15226X8FGoPfo47L&q=85&s=e9a4295dbc4f8f2a632596d135cfa75f" alt="Light and dark theme modes" width="1582" height="154" data-path="images/product-docs/customer-widget/theme-light-dark-modes.png" />
    </Frame>
  </Accordion>

  <Accordion title="Widget Color" icon="palette">
    This is the main color that will be applied to all tabs of the profile. You can easily choose the brand colors you use on your platform.

    <Frame>
      <img src="https://mintcdn.com/gameball/15226X8FGoPfo47L/images/product-docs/customer-widget/widget-color-settings.png?fit=max&auto=format&n=15226X8FGoPfo47L&q=85&s=4eea2b1edbb55aba146fce801be7e963" alt="Widget color settings" width="1272" height="310" data-path="images/product-docs/customer-widget/widget-color-settings.png" />
    </Frame>

    Use the color palette to choose a color that matches your platform theme either by hovering over the palette with your cursor and then clicking on the closest color to your platform. Or for more accurate branding, type down your brand's color code, and click **Save**.

    <Frame>
      <img src="https://mintcdn.com/gameball/qQadqvPdUG22Jh8m/images/product-docs/customer-widget/color-picker-palette.png?fit=max&auto=format&n=qQadqvPdUG22Jh8m&q=85&s=be527dd94f5c815626d47bd04fb5ed0a" alt="Color picker palette" width="2704" height="1444" data-path="images/product-docs/customer-widget/color-picker-palette.png" />
    </Frame>
  </Accordion>

  <Accordion title="Widget Font" icon="font">
    **Available on:** Shopify & Salla Pro/Guru | Non-platform Growth/Enterprise

    You can choose one of the following 7 fonts:

    * Montserrat
    * EB Garamont
    * Roboto Slab
    * Sansita Swashed
    * Mali
    * Work Sans
    * Rubik
  </Accordion>

  <Accordion title="Launcher Button Colors" icon="rocket">
    Available for **web only**.

    <Frame>
      <img src="https://mintcdn.com/gameball/qQadqvPdUG22Jh8m/images/product-docs/customer-widget/launcher-color-settings.png?fit=max&auto=format&n=qQadqvPdUG22Jh8m&q=85&s=abc9d8efa224ed320e72dbe68ccdcbec" alt="Launcher color settings" width="1232" height="508" data-path="images/product-docs/customer-widget/launcher-color-settings.png" />
    </Frame>

    For web applications, you will have a launcher button that will be placed on your website to load/open the Gameball customer widget. You can control the colors of the button:

    * **Launcher Main Color**
    * **Icon Color**
    * **Text Color**
  </Accordion>
</AccordionGroup>

***

## Identity

To give your loyalty assets unique names and icons, switch to the **Identity Tab**.

<Frame>
  <img src="https://mintcdn.com/gameball/qQadqvPdUG22Jh8m/images/product-docs/customer-widget/identity-tab-settings.png?fit=max&auto=format&n=qQadqvPdUG22Jh8m&q=85&s=b1129084159d1a3c63f07fc19b100c2a" alt="Identity tab settings" width="2694" height="1418" data-path="images/product-docs/customer-widget/identity-tab-settings.png" />
</Frame>

<AccordionGroup>
  <Accordion title="Program Name" icon="tag">
    Give your loyalty program a name that goes well with your platform's identity. For example, if your platform sells flowers, then a good name for your rewards program could be "Lily Rewards."

    <Frame>
      <img src="https://mintcdn.com/gameball/15226X8FGoPfo47L/images/product-docs/customer-widget/program-name-field.png?fit=max&auto=format&n=15226X8FGoPfo47L&q=85&s=af8e642596b5c7eff047fcee0aad5fdb" alt="Program name customization field" width="1270" height="254" data-path="images/product-docs/customer-widget/program-name-field.png" />
    </Frame>

    * **Program Name Examples:** Plus Rewards, Adventure Rewards, Fun Portal, etc.
  </Accordion>

  <Accordion title="Points / Score / Earn / Redeem Names" icon="pen">
    **Available on:** Shopify & Salla Pro/Guru | Non-platform Growth/Enterprise

    <Frame>
      <img src="https://mintcdn.com/gameball/15226X8FGoPfo47L/images/product-docs/customer-widget/points-score-name-settings.png?fit=max&auto=format&n=15226X8FGoPfo47L&q=85&s=225995cb7dd3242cca5e29bc5b9110c3" alt="Points and score name settings" width="1234" height="314" data-path="images/product-docs/customer-widget/points-score-name-settings.png" />
    </Frame>

    In case you are using score as the [Tiering-up method](/product-documentation/admin-settings/tiering-up-methods), you can also give the score a different name, just as you can do that to the points.

    * **Points Name Examples:** Coins, Tokens, Credit, etc.
    * **Score Name Examples:** Freebies, Rank, Gems, etc.
    * **Earn Name Examples:** Win, Acquire, Save, etc.
    * **Redeem Name Examples:** Spend, Exchange, etc.
  </Accordion>

  <Accordion title="Points & Score Icons" icon="icons">
    **Available on:** Shopify & Salla Pro/Guru | Non-platform Growth/Enterprise

    Choose icons from Gameball's icon library for:

    * **Points Icon**
    * **Score Icon**

    <Frame>
      <img src="https://mintcdn.com/gameball/15226X8FGoPfo47L/images/product-docs/customer-widget/points-score-icon-library.png?fit=max&auto=format&n=15226X8FGoPfo47L&q=85&s=018ecc45bb391a517893c26ad56161dc" alt="Points and score icon library" width="1632" height="288" data-path="images/product-docs/customer-widget/points-score-icon-library.png" />
    </Frame>

    Choose icons from Gameball's icon library or **upload your own icons** for:

    * **Earn Icon**
    * **Redeem Icon**

    <Frame>
      <img src="https://mintcdn.com/gameball/qQadqvPdUG22Jh8m/images/product-docs/customer-widget/earn-redeem-icon-options.png?fit=max&auto=format&n=qQadqvPdUG22Jh8m&q=85&s=3a4c35d9cab4295e71ecf5e898709227" alt="Earn and redeem icon options" width="1584" height="500" data-path="images/product-docs/customer-widget/earn-redeem-icon-options.png" />
    </Frame>
  </Accordion>
</AccordionGroup>

***

## Guest Widget

**Available on:** Shopify & Salla Pro/Guru | Non-platform Growth/Enterprise

### Uploading an Image as a Widget Icon for Guests

One of the things that directly affect the branding is the main widget icon that shows on the guest landing page of the widget. You can choose an icon that represents your idea of loyalty without drifting from the platform's main theme.

To change the main guest widget icon, go to **Widget > Branding: Guests** in the **Gameball Admin Dashboard**.

<Frame>
  <img src="https://mintcdn.com/gameball/qQadqvPdUG22Jh8m/images/product-docs/customer-widget/guest-branding-settings.png?fit=max&auto=format&n=qQadqvPdUG22Jh8m&q=85&s=39b6d927d084b3a78dca89e5c9452fe0" alt="Guest branding settings" width="2636" height="1430" data-path="images/product-docs/customer-widget/guest-branding-settings.png" />
</Frame>

Under **Image**, choose between the following:

* **Default Image:** Leave Gameball's default icon as it is.
* **Upload Image:** Upload your own image from your own library to match your theme.
* **None:** Leave the guest widget without an icon.

<Note>
  When choosing **"Upload Image,"** the image size and type must be: 280px x 280px. JPEG or PNG.
</Note>

### Create Account URL

Paste the website link where customers can create a new account.

### Login URL

Paste the website link where customers can log in.

Lastly, click **Save**.

***

## What's Next?

<CardGroup cols={2}>
  <Card title="Customize the Widget Launcher" icon="rocket" href="/product-documentation/customer-widget/start-configuring-profile/customize-your-loyalty-launcher-to-fit-your-platforms-interface">
    Control the shape, position, icon, and visibility of your loyalty launcher button.
  </Card>

  <Card title="Customize Tabs Visibility and Order" icon="eye" href="/product-documentation/customer-widget/start-configuring-profile/customizing-tabs-visibility-and-order-in-gameball-widget-settings">
    Control which tabs appear in your widget and in what order they are displayed.
  </Card>

  <Card title="Guest Profile Configuration for Web" icon="user" href="/product-documentation/customer-widget/start-configuring-profile/guest-widget-configuration-for-web">
    Configure the guest experience, including images, sign-up URLs, and login redirects.
  </Card>

  <Card title="Configure Widget Language" icon="language" href="/product-documentation/customer-widget/start-configuring-profile/configure-customer-widget-language-on-your-platform">
    Set a default language and add additional languages to serve a multilingual audience.
  </Card>
</CardGroup>
