Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.usekinetic.com/llms.txt

Use this file to discover all available pages before exploring further.

The Website group in your form’s settings panel contains everything needed to deploy a Kinetic form as an on-site embed. This page walks through each setting in depth. To open these options, click the Settings tab in the top-center navigation, then select Layout, Trigger, or Targeting from the Website section of the left-hand sidebar.

Layout

Configure how your form is visually presented on your site and how it appears to the visitor on the first page. Found under Website → Layout.

Display & Style

Choose how the form appears on your site. There are five display styles:
  • Inline — Embeds the form directly into the body of your webpage. It is always visible and does not require a trigger action from the user.
  • Popup — Displays the form as a centered modal that dims the background of your website. Requires a trigger, such as a custom button or a specific element on your page.
  • Slider — The form slides in from either the left or right side of the screen when triggered.
  • Popover — Places a small, chat-style bubble on your site. When clicked, it opens the form in a floating card in the bottom-left or bottom-right corner.
  • Side Tab — Adds a small, clickable tab to the edge of the screen. Clicking it triggers the form to slide out, similar to the Slider option.

Trigger Button Label

For display styles that surface a button (Popup, Slider, Popover, Side Tab):
  • Customization: Set the button label — e.g. “Take the Quiz”.
  • Styling: The button automatically inherits the colors and styling configured under General → Branding.

First Page Configuration

Controls what visitors see the moment the form opens.
  • Mode: Show a dedicated Welcome screen (with custom intro text and a title) or skip straight to the First question of the form.
  • Image Positioning: Optionally include an image on the first page and align it Left or Right. You can upload your own image or use the built-in AI generation tool.
  • Image Visibility: Show the image on the First page only or persist it across All pages.
  • Alignment: Align the first-page text Left, Center, or Right.
  • Minimal Style: Toggle on to hide the progress bar, page number, and OK button on the first page, for a cleaner introduction.
  • Optional Headline: Add a custom headline that appears above your welcome text or first question.

Form Controls

  • Progress Bar: Toggle on to display a visual indicator at the top of the form showing the user’s completion progress.
  • Question Numbers: Toggle on to show text indicators like “1 of 5” so users know exactly which step they are on.

Picture Choice Settings

Format how picture-based multiple-choice questions render in the embed.
  • Columns: Choose the grid layout — 1, 2, 3, 4, or Auto. A 2-column grid is standard.
  • Max Image Width: Control image size — Auto, 100px, 150px, 200px, or 250px.

Trigger

Configure how and when the form appears to visitors. Found under Website → Trigger.

Trigger Options

  • Auto-open: When enabled, the form opens automatically without requiring a manual click from the visitor.
  • Delay: Set a delay (in seconds) before the auto-open triggers — useful for giving visitors a moment to engage with the page first.
  • Suppression: Set a suppression period (in days) to stop the form from auto-opening repeatedly for users who dismiss or ignore it. For example, a suppression period of 7 days means a visitor who closes the form will not see it auto-open again for a week.
  • Custom Trigger Element: If you already have a button or element on your site that should launch the form, enter its exact CSS selector here (e.g. #my-quiz-button). Leave blank to use the default trigger button configured under Layout → Trigger Button Label.

Behavior Options

  • Hide Form After Submission: When enabled, the form is permanently hidden from any visitor who has successfully completed and submitted it.

Targeting

Define exactly who sees your form based on device, traffic source, location, or Shopify cart contents. Found under Website → Targeting.

General Targeting

  • Devices: Restrict form visibility by device type — All devices, Desktop only, or Mobile only.
  • URL Rules: Target specific pages on your Shopify store.
    • Choose Only show on certain URLs or Don’t show on certain URLs.
    • Add the relevant live URLs from your shop. Use * as a wildcard to match full URLs or folder paths (e.g. /collections/*).
  • Email Traffic: Toggle Only show to visitors from email to restrict the form so it only appears to users arriving via a fallback link inside an email campaign.
  • UTM Parameters: Show the form based on specific UTM parameters present in the visitor’s URL — useful for targeted marketing campaigns.
    The form will only display if all added UTM parameters are present in the URL.

Advanced Targeting

  • Location: Filter visibility based on Shopify’s detected visitor country.
    • Choose Show to visitors in certain countries or Don’t allow to visitors in certain countries.
    • Select the targeted countries from the dropdown.
  • Cart Contents: Dynamically show the form based on what the visitor currently has in their Shopify cart.
    • Total Cart Value: Set a minimum and maximum cart value threshold. Set the maximum to 0 for no upper limit.
    • Number of Items: Set a minimum and maximum number of items in the cart. Set the maximum to 0 for no upper limit.
    • Product Type: Show the form if the cart contains specific product types. Enter types separated by commas (e.g. Skincare, Supplements). The form will show if any item in the cart matches the list.
      The text entered here must exactly match the Type field in your Shopify Product Organization schema.