How the Widget Works
The tikento widget is a standalone JavaScript bundle that loads from tikento.com/widget.js and renders inside a Shadow DOM. Thanks to Shadow DOM, the widget's styles are isolated from your website's styles -- no CSS conflicts.
The form automatically syncs with the platform: changes in the form builder (new fields, ticket changes) appear in the widget without needing to update the code on your site.
Basic Widget Code
<!-- Form container -->
<div data-tikento-widget="YOUR_EVENT_ID"></div>
<!-- Widget script (once per page) -->
<script
src="https://tikento.com/widget.js"
async
defer
></script>
Replace YOUR_EVENT_ID with your event's UUID -- visible in the event URL in the dashboard or in the "Widget" section.
Two Display Modes
Inline Form
The form displays directly on the page at the location of the data-tikento-widget container. Participants fill it out without any popups.
Popup Form
The form opens in an overlay when a button is clicked. Add the data-tikento-popup attribute to any button on your site:
<button data-tikento-popup="YOUR_EVENT_ID">
Register
</button>
The widget script remains the same.
Appearance Customization
On Pro and higher plans, customization via CSS variables is available. Add the following to your site's HTML or CSS:
:root {
--tikento-primary: #4F46E5;
--tikento-radius: 8px;
--tikento-font: 'Inter', sans-serif;
}
Available widget CSS variables are listed in the Widget -> Customization section in the event dashboard.
On the Free plan, the "Powered by tikento" watermark is always present and cannot be removed.
Origin Restrictions (CORS)
On Pro and higher plans, configure your allowed domains list for security. This protects your form from being used on unauthorized websites.
Learn more -- CORS Setup.
Compatible Platforms
The widget works on any platform that supports HTML:
- Tilda, Webflow, Wix, Framer
- WordPress, Squarespace
- Plain HTML pages
- React, Vue, Angular applications
Platform-specific instructions for popular builders -- Installing on Tilda, Webflow, Wix.