Widget Customization

How It Works

The tikento widget renders inside Shadow DOM -- an isolated area where your website's styles cannot penetrate. This guarantees the form always looks correct. The flip side: regular CSS rules from your site cannot directly affect the widget.

For branding, CSS custom properties (CSS variables) are used. They pass through the Shadow DOM boundary and let you control colors, fonts, and border radius.

Available CSS Variables

Set the variables in your site's CSS or directly in the container's style attribute:

:root {
  /* Primary color (buttons, links, accents) */
  --tikento-primary: #4F46E5;

  /* Text color on buttons */
  --tikento-primary-foreground: #FFFFFF;

  /* Form background */
  --tikento-bg: #FFFFFF;

  /* Primary text color */
  --tikento-text: #18181B;

  /* Secondary text color */
  --tikento-text-muted: #71717A;

  /* Input border color */
  --tikento-border: #E4E4E7;

  /* Border radius (buttons, inputs, cards) */
  --tikento-radius: 8px;

  /* Font */
  --tikento-font: 'Inter', sans-serif;

  /* Validation error color */
  --tikento-error: #EF4444;

  /* Success state color */
  --tikento-success: #22C55E;
}

All variables are optional. If you don't set one, the widget uses its default value.

Configuration via Dashboard

A no-code approach -- configure everything in the tikento interface:

1. Open the event in the dashboard.
2. Go to the Registration tab -> Widget for Website section.
3. Click Customization.
4. Choose colors, font, and border radius using visual controls.
5. A live preview is shown on the right -- the form updates in real time.
6. Click Save -- changes apply to all embedded widgets for this event.

The dashboard generates ready-to-use CSS code that you can also copy and paste into your site manually.

Configuration via Code

If you need finer control, set CSS variables directly on the page:

Option 1: Globally via :root

:root {
  --tikento-primary: #0D9488;
  --tikento-radius: 12px;
  --tikento-font: 'Montserrat', sans-serif;
}

Option 2: On the Widget Container

<div
  data-tikento-widget="YOUR_EVENT_ID"
  style="--tikento-primary: #0D9488; --tikento-radius: 12px;"
></div>

The second option is convenient when the page has multiple widgets or you don't want to affect global styles.

Option 3: Loading a Custom Font

If you use a non-standard font, load it on the host page via <link> or @font-face, then specify it in the variable:

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">

:root {
  --tikento-font: 'Montserrat', sans-serif;
}

Shadow DOM inherits CSS variables from the host page, but the font must be loaded at the document level.

Shadow DOM: What's Isolated and What's Not

This means your website's styles will never break the widget, and the widget will not affect your website's styles.

Plan Restrictions

Learn more about the watermark -- "Powered by tikento" Watermark.

Tips

• Check contrast: the button color (--tikento-primary) should have a contrast ratio of at least 4.5:1 with the text color on it (--tikento-primary-foreground).
• Test the form in the browser's dark mode if your site supports a dark theme.
• Specify a fallback font in --tikento-font in case the web font fails to load.
• After saving customization in the dashboard, the widget's Redis cache (widget:config:{eventId}) is automatically invalidated -- changes take effect within seconds.