# HTML quickstart
## 1. Define your schema
Hypertune uses [GraphQL](https://graphql.org/learn/schema/) for its schema definition language.
Go to the Schema view, switch to GraphQL mode and paste the following starter schema:
```graphql
type Query {
root(context: Context!): Root!
}
input Context {
environment: Environment!
user: User!
}
enum Environment { DEVELOPMENT, STAGING, PRODUCTION }
input User {
id: String!
userAgent: UserAgent!
referer: String!
}
type Root {
exampleFlag: Boolean!
userId: String!
ctaClick: Void!
}
# User agent types
input UserAgent {
browser: Browser!
device: Device!
engine: Engine!
os: OS!
cpu: CPU!
}
input Browser {
name: String! # e.g. Chrome, Edge, Firefox, Safari
version: String! # dynamic
}
input Device {
type: String! # e.g. mobile, wearable, tablet
vendor: String! # e.g. Apple, Google, HP, HTC, Huawei, Microsoft, Motorola, Nokia, Samsung
model: String! # dynamic
}
input Engine {
name: String! # e.g. Amaya, EdgeHTML, Gecko
version: String! # dynamic
}
input OS {
name: String! # e.g. Android, BlackBerry, Chromium OS, iOS, Mac OS, Windows
version: String! # dynamic
}
input CPU {
architecture: String! # e.g. 68k, amd64, arm, arm64
}
```
## 2. Define your logic
Go to the Logic view and select the "User Id" field. Set it to `Context > User > Id`.
Now select the "Cta Click" field. Set it to a Log Event expression with a new event type called "CTA Click". Set the Unit ID to `Context > User > Id`.
Click "Save" in the top right corner.
## 3. Fetch your flags
Go to the Preview view and enter the following query:
```graphql
query Content(
$userId: String!,
$userAgent: UserAgent!,
$referer: String!
) {
root(
context: {
environment: "PRODUCTION",
user: {
id: $userId,
userAgent: $userAgent,
referer: $referer
}
}
) {
exampleFlag
userId
}
}
```
Enter the following query variables:
```json
{
"userId": "#UID#",
"userAgent": "#UA#",
"referer": "#REFERER#"
}
```
Hypertune uses [GraphQL](https://graphql.org/learn/queries/) for its query language. In the Result panel, you can see the flag that matches your query.
The `#UID#` value for the `userId` variable is a special placeholder that gets replaced with a randomly generated unique ID.
The `#UA#` placeholder gets replaced with the user agent and the `#REFERER#` placeholder gets replaced with your page URL.
Go to the Code Snippets tab in the Result panel and select HTML. Copy the snippet and insert it in the `` of your page.
## 4. Use your flags
To show or hide a section depending on your flag value, replace the section's code:
```html
```
## 6. Log events
Switch to the Preview view and enter the following query:
```graphql
query Content(
$userId: String!,
$userAgent: UserAgent!,
$referer: String!
) {
root(
context: {
environment: "PRODUCTION",
user: {
id: $userId,
userAgent: $userAgent,
referer: $referer
}
}
) {
ctaClick
}
}
```
Enter the following query variables:
```json
{
"userId": "123",
"userAgent": "#UA#",
"referer": "#REFERER#"
}
```
Go to the Code Snippets tab in the Result panel and select JavaScript. This snippet defines a function named `queryHypertune`. Copy the snippet and insert it inside a new `
```
Now you can call the `ctaClick` function when the user clicks your CTA:
```markup
```
## Next steps
Now you can update the logic for `exampleFlag` from the Hypertune UI without updating your code or waiting for a new build, deployment, or release.