Quick Start
From zero to a working widget in under 5 minutes.
Step 1 — Create a site
- Sign in to your Statiq dashboard at
/login. - Click New Site and give it a name.
- Copy the site key — it looks like
sq_xxxxxxxxxxxxxxxx.
Step 2 — Add the loader script
Paste this once into the <head> of every page that will use Statiq widgets. Replace YOUR_SITE_KEY with the key from Step 1.
Loader script
<script src="https://statiq.services/widget/v1/statiq.js"
data-site="YOUR_SITE_KEY"
defer></script>
The loader script only needs to be added once per page, no matter how many widgets you use.
Step 3 — Place a widget
Add a div with a data-statiq attribute wherever you want the widget to appear in your HTML. The widget renders automatically when the page loads.
Example — events calendar
<div data-statiq="calendar"></div>Step 4 — Add content
Go to your Statiq dashboard and add content for the widget. For the calendar, go to Dashboard → Events and create an event. Reload your page — the calendar appears with your event.
Most widgets show live data from the dashboard. No rebuild or redeploy needed — changes appear immediately.
Available widgets
Replace calendar in data-statiq="calendar" with any of the following:
| Value | Widget | Docs |
|---|---|---|
calendar | Events Calendar | → |
announcements | Announcements | → |
popups | Popups & Banners | → |
contact | Contact Form | → |
subscribe | Email Subscribe | → |
testimonials | Testimonials | → |
gallery | Image Gallery | → |
team | Team Members | → |
faq | FAQ | → |
business-hours | Business Hours | → |
map | Map & Location | → |
social-links | Social Links | → |
booking | Booking | → |
Analytics, Email Broadcasts, and Theming are dashboard-only features — they don't use a widget div. See their individual pages for setup details.