> ## 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.

# What Is the Gameball Customer Widget?

> Learn about what your customer will see, interact with, and achieve through Gameball Customer Widget.

The **Gameball Customer Widget** is the main interface displayed to your customers during their time on your platform. This interface encourages customer engagement and interaction by allowing them to:

* Track their progress
* View the required actions to complete challenges
* Receive more rewards

Explore how the Gameball widget appears in a live store environment by visiting our [demo shop](https://gameball-loyalty.myshopify.com/).

<Frame>
  <img src="https://mintcdn.com/gameball/15226X8FGoPfo47L/images/product-docs/customer-widget/widget-demonstration.gif?s=0d77cd150ffe73b03ea54b34744a29e5" alt="Gameball widget demonstration" width="2880" height="1636" data-path="images/product-docs/customer-widget/widget-demonstration.gif" />
</Frame>

***

## Explore the Gameball Widget Features

Learn about the different sections and features your customers can access directly through the Gameball widget.

The Gameball widget provides your customers with a centralized space to track their progress, redeem rewards, engage with your loyalty program, and more. Here's an overview of each section they will find inside the widget:

<AccordionGroup>
  <Accordion title="Points Section" icon="coins">
    This section displays the customer's current points balance and its equivalent monetary value.
  </Accordion>

  <Accordion title="Earn Tab" icon="star">
    Customers can explore how to earn more rewards. This tab includes:

    1. **Cashback Section**: Shows how customers earn points through purchases.
    2. **Badges Section**: Displays all earned and unearned challenges that have been customized for the customer. It also includes progress indicators and status updates for each challenge.
  </Accordion>

  <Accordion title="Play & Win Tab" icon="gamepad">
    Play & Win is a widget section that displays all active game campaigns in one place. It helps customers quickly discover games and clearly separates games from standard earning actions. The section appears automatically when at least one game is active and disappears when no games are available.
  </Accordion>

  <Accordion title="Redeem Tab" icon="ticket">
    Here, customers can exchange their collected points for different types of discount coupons or other available rewards. Each coupon displays its source — whether it was issued through a reward campaign, a game, an automation, a VIP tier reward, or a referral — so customers always know where their rewards came from.
  </Accordion>

  <Accordion title="Levels Tab" icon="layer-group">
    This tab shows the customer's current level, the upcoming levels they can unlock, and the benefits and rewards associated with each level.
  </Accordion>

  <Accordion title="Referral Tab" icon="user-plus">
    Gameball's referral feature allows customers to refer your platform to their friends. Once a referred friend signs up, the referring customer receives rewards. The more friends they refer, the bigger the rewards they can earn.
  </Accordion>

  <Accordion title="Transaction History" icon="clock-rotate-left">
    Customers can view the full history of their points activity, including how and when they earned or redeemed points.

    You can use a **deep link** to open the Gameball widget directly in the **Customer History** section.

    **Deep Link Identifier:** `#gameball-history`

    **Use Case:** Include the link in your message campaigns:

    "Check your latest rewards here: [YourWebsite.com#gameball-history](http://YourWebsite.com#gameball-history)"
  </Accordion>

  <Accordion title="Notifications Tab" icon="bell">
    A log of real-time updates related to the customer's progress, such as earning a badge or reaching a new level.
  </Accordion>

  <Accordion title="Activated Game Campaigns" icon="trophy">
    If any game campaigns are activated, such as Spin the Wheel, they will appear as interactive sections within the widget for the customer to engage with.
  </Accordion>
</AccordionGroup>

***

## How Will Gameball Customer Widget Be Displayed on Your Platform?

<Tabs>
  <Tab title="Web">
    <Frame>
      <img src="https://mintcdn.com/gameball/15226X8FGoPfo47L/images/product-docs/customer-widget/web-customer-widget.png?fit=max&auto=format&n=15226X8FGoPfo47L&q=85&s=539f9a069abcd19550ae46d1196c76e9" alt="Web customer widget" width="2872" height="1622" data-path="images/product-docs/customer-widget/web-customer-widget.png" />
    </Frame>
  </Tab>

  <Tab title="Mobile">
    Gameball's customer profile can be integrated into your mobile app in two ways:

    **A. As a new tab in your app**

    <Frame>
      <img src="https://mintcdn.com/gameball/15226X8FGoPfo47L/images/product-docs/customer-widget/mobile-widget-tab.png?fit=max&auto=format&n=15226X8FGoPfo47L&q=85&s=300ed0b8cc851f7846834811e51c3cd3" alt="Mobile widget as tab" width="1428" height="1078" data-path="images/product-docs/customer-widget/mobile-widget-tab.png" />
    </Frame>

    **B. As an overlay accessed by any button in the app**

    <Frame>
      <img src="https://mintcdn.com/gameball/15226X8FGoPfo47L/images/product-docs/customer-widget/mobile-widget-overlay.png?fit=max&auto=format&n=15226X8FGoPfo47L&q=85&s=a4f73d93925a52849488e18bee386a26" alt="Mobile widget as overlay" width="1594" height="1130" data-path="images/product-docs/customer-widget/mobile-widget-overlay.png" />
    </Frame>
  </Tab>
</Tabs>

***

## What's Next?

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

  <Card title="Customize Widget to Match Your Brand" icon="palette" href="/product-documentation/customer-widget/start-configuring-profile/customize-widget-branding">
    Adjust colors, fonts, icons, and identity to align the widget with your platform's look and feel.
  </Card>

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