# 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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.hypertune.com/getting-started/html-quickstart.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.