Custom Trigger Elements
Beyond the standalone page and the built-in embed widget, you can mark any element on your website as a trigger to open the main widget. This lets you repurpose existing buttons, cards, or styled sections as gateway points into the chat without building them from scratch.
How It Works
Add the ziptier-widget-trigger class to any element on your page. When clicked, it opens the same site-wide widget instance. Optionally, add data-trigger-question to prefill a message.
Note: Custom triggers use plain HTML classes and attributes, not a JS framework, so they work the same on WordPress, Shopify, Webflow, Squarespace, or any hand-coded page. They require the main embed widget script to also be present on the page — see Website Embed for the base install.
Basic Trigger (Unstyled)
The simplest form — wrap your own HTML and CSS:
<button class="ziptier-widget-trigger">
Ask our AI
</button>Auto-Styled Triggers
Alternatively, let ZipTier render one of its built-in launcher styles (pill, fab, avatar, or textbox) directly into a trigger element by adding data-button-style. The widget script automatically injects the styled launcher, so you don't need to hand-code it.
Available Attributes
Note: Custom triggers support a subset of the embed widget's attributes. Some options (chat URL, widget size, animations) are not available for triggers, as they inherit the main widget's configuration.
| Attribute | Description | Example |
|---|---|---|
ziptier-widget-trigger | Marks this element as a trigger (required, CSS class not an attribute) | class="ziptier-widget-trigger" |
data-button-style | Launcher style: pill, fab, avatar, or textbox | data-button-style="pill" |
data-button-text | Button label, or placeholder for textbox | data-button-text="Chat with us" |
data-button-color | Background color (hex) | data-button-color="#667eea" |
data-button-text-color | Text / icon color (hex) | data-button-text-color="#ffffff" |
data-button-size | Button size: small, medium, large | data-button-size="large" |
data-button-corner | Corner style: rounded or sharp | data-button-corner="sharp" |
data-button-font | Font family | data-button-font="Inter" |
data-button-avtr-initials | Avatar style only: Initials inside the avatar circle | data-button-avtr-initials="AI" |
data-button-avtr-initials-color | Avatar style only: Color of the initials | data-button-avtr-initials-color="#ffffff" |
data-button-opacity | Textbox style only: Background opacity (0.4–1) | data-button-opacity="0.6" |
data-trigger-question | Prefills the widget's input box with this message when it opens; the visitor still has to send it themselves | data-trigger-question="Tell me about pricing" |
Examples
Unstyled trigger with prefilled question:
<div class="help-section">
<h3>Have Questions?</h3>
<p>Our AI assistant can help.</p>
<button class="ziptier-widget-trigger" data-trigger-question="What's included in your support plan?">Ask now</button>
</div>Auto-styled textbox launcher:
<div class="ziptier-widget-trigger"
data-button-style="textbox"
data-button-text="Ask a question...">
</div>When to Use Custom Triggers
- Product pages: Add styled launch points next to key features or FAQs.
- Navigation bars: Place a "Contact AI" button alongside standard nav links.
- Landing pages: Embed multiple entry points (e.g., bottom of each section).
- Hero sections: Style a textbox trigger to match your design.
- Custom elements: Wire up any existing button or card to open the widget.
For the full list of styling attributes and their values, see the Widget Customization Reference. Triggers reuse the same style vocabulary, so anything you learn there applies here.