# Quick Start Guide

To keep it simple, we've created a guide and an example integration that you can check out.

1. [Clone this repo](https://github.com/hastearcade/sdk-game-example) and follow the `README.md` to run an example game locally on your machine.
2. Navigate to [https://dev.hastearcade.com?gameId=f8c22e6c-1086-4529-8800-2c72f98b9915\&src=http://localhost:1234](https://dev.hastearcade.com/?gameId=f8c22e6c-1086-4529-8800-2c72f98b9915\&src=http://localhost:1234)
3. At this point you should see 4 buttons rendered in an iFrame. Open up the your browser's dev console and then click the buttons and notice the logs.

{% hint style="info" %}
If you do not see the buttons rendered, check out the url query params and ensure that the <mark style="color:purple;">`src`</mark> param in step 2 matches where the demo game is being served.
{% endhint %}

<figure><img src="https://3904411602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fejw7FsisKfPD5qk0ySlq%2Fuploads%2FFTzVu1Bgxi7NKvdA5Wx0%2FScreen%20Shot%202024-05-06%20at%206.16.17%20AM.png?alt=media&#x26;token=3b9044dc-bb16-4d75-8b27-058e6b4442be" alt=""><figcaption></figcaption></figure>

4. Take a look at the `game.ts` file in the [example game repo](https://github.com/hastearcade/sdk-game-example/blob/main/src/game.ts) and get a feel for what is happening.
5. Integrate the needed methods into your game using the [SDK](https://docs.hastearcade.com/integrate/sdk), ensure your game is running locally, then update the `src` param found in the url of step 2 to wherever your game is being locally served.

{% hint style="info" %}
While in this test environment, use `f8c22e6c-1086-4529-8800-2c72f98b9915` as your `gameId` when creating a new instance of the `GameService`. In production you will use the gameId that is generated when you [register your game](https://docs.hastearcade.com/prep-work/register-your-game).
{% endhint %}

🍾 👏 Congrats if you see your game rendered in the iFrame. You've successfully integrated your game.

{% hint style="info" %}
Note that no database records are created and the messages the demo arcade returns are static (mock data). Just ensure that your game is properly handling and responding to the data it receives.
{% endhint %}

6. Once you've successfully integrated your game into the demo app, you can create and [API key](https://docs.hastearcade.com/prep-work/authentication), and [register your game](https://docs.hastearcade.com/prep-work/register-your-game).

Make sure to [update your production domain](https://docs.hastearcade.com/prep-work/register-your-game#update) and let us know when you are [ready to publish](https://docs.hastearcade.com/integrate/publish-your-game) 🚀