Atli eSIM widget

This page is the development harness as well as the integration example. Change any control below and the widget updates in place — the same thing happens when you change a data-* attribute on the script tag.

Widget parameters

Styling the widget

Point data-css at your own stylesheet and it is loaded inside the widget, after the defaults — so plain selectors already win, with no !important needed. There are two layers you can reach:

  1. Design tokens. Every colour, radius, font and spacing step is a --atli-* custom property on .atli-widget. Setting tokens rethemes every component at once — this is the whole job most of the time.
  2. Semantic classes. For the few things tokens cannot express, every element carries a stable atli- class (.atli-card, .atli-package, .atli-tier, …).

Both themes stay live, so cover .atli-widget and .atli-widget[data-theme='dark'] in your file.

Open the annotated example theme — themes/sunset.css →
…or the second one — themes/mono.css →
Both are complete, commented worked examples covering both layers and both themes, and they pull in opposite directions: sunset is warm, soft and serif; mono is monochrome, monospace and compact. Paste any stylesheet URL into “Custom CSS URL” above to apply it live — the field suggests both.

Use this code on your page