Header
Choose a Full, Slim or Hidden header, the parts it carries, and where the links to Activity, Leaderboard, Portfolio and Saved go
The header is the bar at the top of the embed. You set it in your look, in the Appearance Studio, separately for sandbox and production. You choose three things:
- How much bar there is: Full, Slim or Hidden.
- Which parts the bar carries.
- Where the links to Activity, Leaderboard, Portfolio and Saved go.
The default is a Full header with every part and the links in the header.
Full, Slim or Hidden
| Header | What it is |
|---|---|
| Full | The whole bar. Use it when the embed is the main thing on the page |
| Slim | The same bar, thinner: smaller type, a narrower search field, a logo no taller than 20 pixels, and a smaller account picture. Use it when the embed sits among other content |
| Hidden | No bar. Use it when the embed sits under your own site header, and your page already shows your logo, the balance and the account |
The Parts
A Full or Slim header carries the parts you leave on. A part you switch off is drawn nowhere in the embed.
| Part | What it is | Who sees it |
|---|---|---|
| Logo or name | Your brand mark. Selecting it goes to the markets | Everyone |
| Search | The search field. A phone never has it in the header: on a phone, search is always first in the category bar | Everyone |
| Notifications | The bell, with the number of unread notifications | Signed-in players |
| Balance | The player's balance | Signed-in players |
| Deposit | The Deposit button. It asks your page to open your cashier (deposit.requested) | Signed-in players |
| Account | For a signed-in player, their picture, which asks your page to open its account page (profile.requested). For a visitor, a Sign in button, which asks your page to sign them in (auth.requested) | Everyone |
On a phone, the account picture opens a menu: the player's name, then the balance and Notifications when their parts are on, then Saved, then Account. With the Account part off there is no menu. The bell then sits in the top row, and Saved moves to the tab bar.
Where the Links Go
The links lead to Activity, Leaderboard, Portfolio and Saved. Saved is for signed-in players. Leaderboard and Activity are there only while they are on in Curation, Features.
| Choice | On a desktop | On a phone |
|---|---|---|
| In the header | Links in the bar | A tab bar at the bottom |
| Tabs in the page | A row of tabs at the top of the page, under the header: Markets, Activity, Leaderboard, Portfolio and Saved | The same tab bar |
| Your site's menu | No links. Your own menu opens the pages with the Host SDK's navigate, and every inner page shows a link back to the markets | No tab bar |
The phone's tab bar holds Markets, Portfolio, Leaders (the phone's name for Leaderboard) and Activity. Saved is in the account menu when the phone has one, and in the tab bar when it does not.
A Hidden header has no bar to hold the links, so it offers only Tabs in the page and Your site's menu. When you hide a header whose links were in it, the studio moves them to tabs in the page.
To build your site's menu, see Your Site's Menu in the Host SDK page. It lists the pages the embed offers, so your menu never links to a page you switched off.
What Players See
This is a signed-in player, with every part on. A visitor sees a Sign in button in place of the balance, Deposit, notifications and account picture.
| Header | On a desktop | On a 390 pixel phone |
|---|---|---|
| Full | A full-height bar: your logo or name, the search field, the links, then notifications, the balance, the Deposit button and the account picture | A top row with your logo or name, the balance with a + to deposit, and the account picture. Search is first in the category bar. A tab bar at the bottom holds the links |
| Slim | The same parts in a thinner bar. The balance and Deposit join in one small pill | The same top row, thinner, with a smaller logo, and the same category bar and tab bar |
| Hidden | No bar. The page starts with the tab row, or with the categories when your site's menu leads. Search is first in the category bar. Your page shows the logo, balance, Deposit, notifications and account | No top row. The categories come first, with search first in them. A tab bar at the bottom with Saved in it, or none when your site's menu leads |
The language picker is in the top row or the bar when players pick their own language, and is not a part you switch. With a Hidden header there is no Sign in button in the embed. A visitor who taps something only a player can do, such as Buy, still makes the embed ask your page to sign them in (auth.requested).
What Always Stays Reachable
Search, the links and the language picker are never lost. When the header does not carry one, it moves into the page:
| Thing | When the header does not carry it |
|---|---|
| Search | First in the category bar, as a search button. With the Board layout, a search field above the category rail |
| Links | Where you chose: tabs in the page, or your site's menu |
| Language picker | In the category bar. It shows only when players pick their own language: you have more than one language and your launch token names none (see Languages) |
Your brand, the balance, the Deposit button, notifications and the account are different. The embed draws them only in the header, where you put them. With a Hidden header, or a part switched off, the embed draws that part nowhere else. The Deposit prompts on the order ticket and in Portfolio are page content and stay. Your own page shows it, or nobody does. The embed still tells your page what it needs to show them: with notifications off players have no bell, but notification.received still reaches your page, and deposit.requested still comes from the order ticket and Portfolio.
A Header That Shows Nothing
A Full or Slim header has to show something: at least one part, or the links. A header with every part off and the links not in it is refused where you set it, with "shows nothing: choose Hidden instead", and it cannot be saved. If you want no bar, choose Hidden.
With the Launch Token
The launch token's cfg can hide a part of the header for one player. deposit: false hides the Deposit button, and profile: false hides the account picture on a desktop, and the Account item in the phone's menu. See Player Buttons.
A token can hide more than the look hides. It can never show what the look hides:
| The look | The token's cfg | The player sees |
|---|---|---|
| Part on | Key left out, or true | The part |
| Part on | Key false | No part |
| Part off | Any | No part |
The same holds for Deposit with deposit and for Account with profile. A visitor's Sign in button is not affected by cfg. The Deposit button inside the Portfolio page is page content: it follows cfg.deposit only, not the look's Deposit part.
Set It in the Back Office Only
No URL parameter, no Host SDK override
The header has no URL parameter and no Host SDK call, and setTheme does not change it. It is set in the back office, as part of your look.
Like the rest of the look, the header is saved per environment, copied from sandbox to production with the look, and restored with it (see Saving, Copying and Restoring).
Three Common Setups
| Setup | Header | Links |
|---|---|---|
| The embed is the page | Full | In the header |
| The embed sits under your site's header | Hidden | Tabs in the page |
| Your site's menu leads | Hidden, or Slim | Your site's menu |