Widget Not Loading or Styles Are Broken

Quick Diagnosis

Before diving into specific issues, perform a basic check:

1. Open the page with the widget.
2. Press F12 (or Cmd+Option+I on Mac) -> Console tab.
3. Look for errors related to tikento, widget.js, CSP, or CORS.
4. Check the Network tab -- find the request to tikento.com/widget.js and confirm the status is 200.

Problem: Widget Does Not Load at All

Cause 1: Content Security Policy (CSP) Blocks the Script

Symptoms:

• The form does not appear.
• In the console: Refused to load the script 'https://tikento.com/widget.js' because it violates the following Content Security Policy directive: "script-src ...".

Solution:

Add tikento.com to the script-src directive in your CSP policy:

script-src 'self' https://tikento.com;

If you use a meta tag:

<meta http-equiv="Content-Security-Policy"
  content="script-src 'self' https://tikento.com;">

You may also need to add connect-src https://tikento.com for widget API requests and style-src 'unsafe-inline' https://tikento.com for styles.

Cause 2: Incorrect eventId

Symptoms:

• The script loads (200 in Network), but the form does not render.
• In the console: [tikento] Event not found or [tikento] Invalid eventId format.

Solution:

1. Open the event in the tikento dashboard.
2. Go to the Registration -> Widget for Website tab.
3. Copy the correct UUID from the field or from the ready-made widget code.
4. Make sure the data-tikento-widget attribute contains exactly the UUID with no spaces or extra characters.

<!-- Correct -->
<div data-tikento-widget="550e8400-e29b-41d4-a716-446655440000"></div>

<!-- Incorrect -->
<div data-tikento-widget="YOUR_EVENT_ID"></div>

Cause 3: Script Not Included or Included Twice

Symptoms:

• The container div is on the page, but the form does not appear.
• No errors in the console, no request to widget.js in Network.

Solution:

Make sure the <script> tag is present on the page and loads exactly once:

<script src="https://tikento.com/widget.js" async defer></script>

Some website builders (Tilda, Wix) require adding scripts in special blocks. See Installing on Tilda, Webflow, Wix.

Problem: CORS Errors

Symptoms:

• The form starts loading, but data (fields, tickets) is not pulled in.
• In the console: Access to fetch at 'https://tikento.com/api/...' from origin 'https://your-site.com' has been blocked by CORS policy.

Solution:

On Pro and higher plans, you need to add your website's domain to the allowed origins list:

1. In the dashboard: event -> Registration -> Widget -> Allowed Domains.
2. Add your website's domain (e.g., example.com or *.example.com).
3. Click Save.

Changes take effect within one minute (after cache invalidation of widget:origins:{eventId}).

On the Free plan, CORS restrictions are not applied -- the widget works on any domain.

Learn more -- CORS Setup.

Problem: Widget Styles Are Broken

Inherited CSS Properties

Shadow DOM isolates most styles, but some CSS properties are inherited across the Shadow DOM boundary:

• font-family, font-size, line-height
• color
• direction, text-align
• visibility

If your CSS reset sets aggressive values on body or *, it may affect the widget.

Solution:

Set the widget's CSS variables explicitly to override inherited values:

:root {
  --tikento-font: 'Inter', sans-serif;
  --tikento-text: #18181B;
}

Widget Container Is Collapsed or Invisible

Symptoms:

• The widget renders with 0 height or 0 width.
• The form is clipped.

Solution:

Check that the parent element of the data-tikento-widget container does not have:

• overflow: hidden with a fixed height
• display: none or visibility: hidden
• max-height: 0 or height: 0
• position: fixed / absolute without specified dimensions

The widget container needs a minimum free width of 320px.

Problem: Old Version of the Form Is Displayed

Symptoms:

• You updated fields or tickets in the builder, but the widget on your site shows the old version.

Solution:

1. Browser cache. Press Ctrl+Shift+R (or Cmd+Shift+R on Mac) for a hard reload.
2. CDN / hosting cache. If your site is behind Cloudflare or a similar CDN, clear the cache for the page with the widget.
3. tikento Redis cache. Widget configuration is cached with a TTL of 300 seconds (5 minutes). If more than 5 minutes have passed and changes haven't appeared -- contact support.

The widget.js script loads with the Cache-Control: no-cache header -- it is always fresh. But the form configuration (fields, tickets, options) is cached on the tikento side.

Problem: Widget Does Not Work in Popup Mode

Symptoms:

• The button with data-tikento-popup does not open the form when clicked.

Solution:

1. Make sure the widget.js script is loaded on the page.
2. Check that the data-tikento-popup attribute contains a valid event UUID.
3. If the button is added dynamically (via a JS framework), make sure it is present in the DOM when the widget initializes, or call window.tikento?.refresh() after adding it.

Console Errors: Reference

Still Not Working

If the issue persists after all checks:

1. Take a screenshot of the console errors (Console tab).
2. Copy the URL of the page where the widget is installed.
3. Note your browser and its version.
4. Send everything to support via the dashboard (Help -> Contact Support) or to support@tikento.com.