Interaction Builder: Build Multi-Step Tap Flows

What the builder is for link

The Interaction Builder is how Account Managers and Tag Managers build step-based interactions — reusable tap responses that can do more than one thing in sequence. Each saved interaction is assigned to a Kitetag Group, and every tag in that group runs the same flow.

The builder is also used to create the simpler single-action quick-create templates (URL Redirect, Webhook, vCard, Zapier) from the Interactions page — those are one-step versions of the same flow engine.

The three tabs: Steps, Design, Settings link

The builder has three tabs across the top of the configuration panel:

A live iPhone 14 preview on the right side of the builder updates as you edit, so you can see what the Tapper will see before publishing.

Step 0: Kitetag Tapped link

Every interaction begins with a fixed Step 0: Kitetag Tapped. It is always shown at the top of the step list as a visual anchor — you cannot drag, rename, or delete it. Step 0 represents the moment the Tapper taps their phone on the Kitetag; your configurable steps are numbered 1, 2, 3… after it.

Step 0 is not a step you build — it’s the event that starts the flow.

Step types link

The Add step button opens a catalog of step types, grouped into two categories.

Display Content (the Tapper sees and interacts with) link

Actions (run behind the scenes or end the flow) link

Silent vs. terminal steps at a glance link

• Silent steps (Webhook, Zapier) don’t show any UI. They execute, then the flow continues to the next step.
• Terminal steps (URL Redirect) end the flow. If you add a URL Redirect, the builder automatically keeps it pinned to the end of the step list and places any new step before it (#624). You don’t need to manually reorder.

Configuring each step type link

Message step link

Used at the start (“Welcome!”) or end (“Thanks for tapping!”) of a flow.

Fields:

• Title — The large heading shown to the Tapper.
• Message — The body text. Supports KDS template placeholders like {{ callsign }}.
• Button Text — Label on the Continue button. Leave empty to hide the button on a terminal “Thank You” screen.
• Show checkmark icon — Displays a circled checkmark above the title (good for confirmation screens).
• Auto-advance to next step — Optional countdown timer that moves the Tapper forward automatically.

Form Input step link

Collect information from the Tapper at tap time.

Add fields one at a time. Each field has:

• Label — Shown above the input.
• Type — One of: Text Input, Email, Phone, Dropdown, Radio Buttons, Checkbox.
• Placeholder — Hint text inside the empty input.
• Required — Blocks submission if left blank.
• Options — For Dropdown, Radio, or Checkbox types, the selectable values.

Form Input also has a Submit Button Text field — the label on the button that submits the form and advances to the next step.

vCard step link

Displays a contact card and lets the Tapper save it to their phone’s address book.

Fields:

• Title and Description — Shown above the contact details.
• Contact fields — Full Name, Email, Phone, Organization, Title, URL, Note, and more. Each can be a literal value or a KDS template ({{ first_name }}, {{ email }}).
• Allow download to phone — When enabled, the primary button reads Save & Continue and triggers a .vcf download before advancing. When disabled, the button reads Continue and just moves forward.
• Show contact preview — Displays the contact fields to the Tapper before they save.

Email and phone links in the preview are tappable — mailto: and tel: — so the Tapper can email or call without saving the contact first.

WiFi Share step link

Shares WiFi credentials for a venue’s guest network.

Fields:

• Network Name (SSID) — Exactly as broadcast by your router.
• Security — WPA/WPA2/WPA3, WEP, or None (open network).
• Password — Hidden behind a show/hide toggle in the builder.
• Hidden network — Check this if the SSID does not broadcast.
• Venue / Brand Name (optional) — Displayed above the QR code so the Tapper knows whose WiFi they are connecting to.
• Instructions — Short text telling the Tapper what to do next.
• Download Button Text — Label on the button that downloads the QR code image.

The tap screen shows the venue name, a QR code image, the instruction text, and a download button. Most modern phones (iOS 11+, Android 10+) recognize the QR code and offer to join the network.

Display Information Table step link

Shows a two-column table of information to the Tapper — ideal for part numbers, calibration data, event details, or any structured read-only content (#634).

Fields:

• Table Title (optional) — Heading above the table. Supports KDS templates.
• Description (optional) — Subtitle text.
• Table Rows — Add one row at a time. Each row has a Name (left column label) and a Display Value (right column value). Both support KDS templates and can include literal text. Drag the grip handle to reorder rows.
• Submit Button Text (optional) — If empty, no button appears and the flow ends at this step. If set, a button with that label advances to the next step.

Use Display Information Table when you want the Tapper to read structured data tied to the specific tag they just tapped.

Webhook step link

Sends tap data (and any form responses from earlier steps) to your HTTP endpoint.

Fields:

• URL — The destination https:// URL.
• HTTP method — Usually POST.
• Custom headers — Optional Key: Value headers (e.g. authentication tokens).

The step is silent: the Tapper never sees a “sending request” page. If the webhook fails, the flow logs the error and continues to the next step. See the webhook reference for the JSON payload shape.

Zapier step link

Same pattern as Webhook but uses a Zapier webhook URL. See the Zapier integration guide for zap setup.

URL Redirect step link

Sends the Tapper to an external URL. This is a terminal step — the flow ends here by navigating the browser away.

Fields:

• URL — The destination. Supports KDS templates, so you can redirect to a per-tag URL.

The Design tab link

The Design tab controls the look of every display step in the interaction. Changes apply to every Message, Form, vCard, WiFi Share, and Display Information Table step — not just the one you’re editing.

Configurable settings:

• Color scheme — Pick from presets or set Primary Color, Background Color, and text colors individually.
• Typography — Font Family (Inter, Arial, Georgia, and more), Font Weight (300–700), Font Size.
• Logo — Upload an image (PNG/JPG/SVG) shown above every display step.

The iPhone 14 preview updates live as you change these settings. Your choices are saved with the interaction — use different interactions for different brands or sub-brands.

Building your first step-based interaction link

1. Click Create Interaction from the Interactions page, or open kitetags.dev/interaction-builder/new.
2. In the Settings tab, give the interaction a name and pick the Kitetag Data Structure (KDS) it should read from.
3. Back in the Steps tab, click Add step and choose a step type. Step 1 is added below Step 0.
4. Fill in the step’s configuration in the right panel. Watch the iPhone preview.
5. Add more steps as needed. Drag the grip handle on the left of any step to reorder — except Step 0 (fixed) and URL Redirect (pinned to the end).
6. Switch to the Design tab to pick colors, fonts, and upload a logo.
7. Click Save Draft to save without publishing, or Publish to make it live.
8. Assign the interaction to a Kitetag Group. All tags in that group will use the new flow on their next tap.

What the Tapper sees link

When someone taps a tag whose group is assigned a step-based interaction, their browser loads a mobile-first tap page:

• Progress dots at the top show the number of visible steps (silent steps like Webhook and Zapier are excluded from the count).
• Each display step uses the colors, fonts, and logo from the Design tab.
• Silent steps run in the background with a brief loading indicator, then auto-advance.
• The flow ends at a terminal step (URL Redirect → navigates away) or at the last non-terminal step (stays on that screen).

Example flows link

Café guest-WiFi flow:

1. Message — “Welcome to Blue Bean Café”
2. WiFi Share — SSID, WPA2 password, venue name
3. Message — “Thanks for visiting” (terminal, no button)

Event check-in flow:

1. Message — “Welcome to the conference”
2. Form Input — Name + Email (required)
3. Webhook — Log the check-in to your CRM (silent)
4. Display Information Table — Room number, session schedule
5. URL Redirect — Open the event agenda PDF

Asset-tracking flow:

1. Display Information Table — Serial number, last maintenance date, manual link (all pulled from KDS)
2. Form Input — “Log an inspection note” (optional)
3. Webhook — Send the note to an internal tracker (silent, terminal)

Next steps link

• Review the single-action Apps as a simpler alternative for one-thing-on-tap scenarios.
• Learn how Kitetag Data Structures (KDS) define the fields that appear as {{ placeholders }}.
• Configure a webhook endpoint to receive form and tap data.
• Understand how flows are assigned in Kitetag Groups.