---
title: "Surfaces: paste once, show every provider"
description: Add two lines to your casino page and show game providers from the Marketplace, switched on or off from your OneHazel account.
---

# Surfaces: paste once, show every provider

A Surface is a block of your own casino page that OneHazel fills with provider content. You paste two lines once. After that, you decide in the app which providers appear, with no code change on your side.

Today the Lobby surface is available. It shows a provider's games in demo mode.

## Install

Paste this into the page where the lobby should appear. Use your own operator id, shown in the app under **Surfaces**.

```html
<script src="https://app.onehazel.com/embed/v1/oh.js" data-operator-id="op_xxxxx"></script>
<div data-oh-surface="lobby"></div>
```

The block takes on your page's fonts and colours automatically. Your own CSS always wins, so a clash is yours to adjust with ordinary rules. Stable class names such as `oh-game-card` and `oh-tab` are there to target.

### Single-page apps

The script looks for `data-oh-surface` blocks once, when it loads. If your site renders pages in the browser (React, Vue, Next.js and similar) and the lobby block appears later, call `window.OneHazel.scan()` after the block is on the page, for example when the home view mounts. The call is safe to repeat: a block already filled is left alone.

### Which API the script talks to

Copy the snippet from the app in the environment you are testing. The script picks the matching OneHazel API from the address it was loaded from, so the two lines are all you need. To point the script somewhere else, add `data-api-base` with the API address to the script tag.

## Switch a provider into demo mode

1. Open the app and go to **Surfaces** in the sidebar.
2. Find the provider in the list.
3. Turn on its **Demo mode** switch.
4. Reload your casino page. The provider's games appear with a demo badge.

### Choose which games show

Once a provider's demo switch is on, its row shows how many of its games appear, for example "All 114 games shown". Open **Choose games** to pick them:

1. Type in the filter box to find games by name.
2. Tick or untick games, or use **Select all** and **Clear** on the games the filter shows.
3. Select **Save**. Reload your casino page to see the change.

Selecting every game shows all of them, including games the provider adds later. Clearing every game hides the provider from your lobby until you choose at least one game again. Hiding a game only removes it from your lobby.

Turn the switch off and reload to remove the provider again. Switching a provider off forgets its game choice, so switching it back on shows all its games. Nothing shows on your page until you switch it on, so a provider you have no agreement with is never displayed.

## What demo mode is, and is not

- Games open with play money. No wallet is called and no real money moves.
- Players do not log in and no player data is sent.
- Only providers that have already proven a successful live wallet call are offered for demo.
- A provider may be missing from the list if it has not supplied a demo link yet.

## Real money

Real-money games need a live connection with your own keys from that provider. The Lobby shows those providers once your connection is active and your wallet passes conformance. Launching real-money games from the embedded Lobby arrives in a later release.

## Troubleshooting

- **The box is empty.** Surfaces may not be switched on for your account yet, or no provider is switched on. Check the Surfaces page in the app.
- **A provider is missing.** Confirm its demo switch is on, then reload. The page caches for up to a minute.
- **Nothing loads at all.** An ad blocker or a strict content security policy can block the script. Allow `app.onehazel.com` for scripts and `api.onehazel.com` for connections.
- **The text says "Nothing to show here yet".** The page reached OneHazel but no provider is active for this operator id. Check the id for typos.