๐งฉ Embed Widget
Drop a single <script> tag into any HTML page (Squarespace,
Wix, WordPress, plain HTML, etc.) to display a card for an EasyShul event or
registration form. The widget renders inline using the host page's fonts —
no iframe, no big banner image.
Embed an event
Find the event ID at the end of the EasyShul event URL (the long hex string after /events/). Then paste:
The widget shows the event name, date, duration, location, event type, contact info, pricing, and a Register button that links to the EasyShul registration page.
Embed a registration form
Same pattern, but use data-form instead of data-event and the form ID:
Customization
Add data-* attributes to the <script> tag to customize the widget's appearance and behavior:
Appearance
| Attribute | Default | Description |
|---|---|---|
data-accent-color | #1a73e8 | Button background, link color |
data-bg-color | #fff | Widget card background |
data-text-color | #333 | Body text color |
data-border-color | #e0e0e0 | Card border and divider color |
data-border-radius | 8px | Card corner radius |
data-max-width | 480px | Maximum card width |
Content
| Attribute | Default | Description |
|---|---|---|
data-button-text | Register | Text on the Register / Submit button |
data-success-text | Submitted successfully! | Message shown after successful submission |
data-title | (from EasyShul) | Override the form/event title |
data-description | (from EasyShul) | Override the description (plain text; HTML from EasyShul is replaced) |
data-hide-description | false | Set to true to hide the description section |
data-hide-contact | false | Set to true to hide the contact info |
data-hide-pricing | false | Set to true to hide pricing and variants |
data-hide-deadline | false | Set to true to hide the submission deadline |
data-hide-title | false | Set to true to hide the title heading |
data-hide-date | false | Set to true to hide the event date and duration |
data-hide-location | false | Set to true to hide the event location |
data-hide-type-badge | false | Set to true to hide the event type badge (In-Person / Virtual) |
Example: Squarespace dark theme
CSS override
You can also style the widget's container element with CSS. The widget uses the class .es-widget:
.es-widget {
font-size: 14px; /* override base font size */
box-shadow: 0 4px 12px rgba(0,0,0,.1); /* add a shadow */
}
.es-widget h2 {
color: #1e40af; /* override title color */
}
.es-widget a {
color: #7c3aed; /* override link color */
}data-* attributes take priority over CSS for
the properties they control (background, border, etc.) because they're applied as
inline styles. Use CSS for anything the attributes don't cover.
Live preview
Try a live preview against any event or form ID from your organization:
Paste an event or form ID above and click Preview to see the widget render here.
Squarespace
- Edit the page where you want the widget.
- Click the + insert point and choose Code (under "More").
- Paste the snippet from above. Make sure the language is set to HTML.
- Click Apply and Save.
WordPress
- Edit the page or post.
- Add a Custom HTML block (Block editor) or switch to the Text tab (Classic editor).
- Paste the snippet and publish.
Wix
- Click Add Elements โ Embed Code โ Embed HTML.
- Click Enter Code, paste the snippet, and click Update.
- Resize the embed box to fit the rendered widget (about 480px wide).
What the widget shows
| Field | Paid events | Free events | Paid forms | Free forms |
|---|---|---|---|---|
| Title | โ | โ | โ | โ |
| Date / time | โ (with duration) | โ (with duration) | โ | โ |
| Location | โ | โ | โ | โ |
| Event type badge | โ | โ | โ | โ |
| Submission deadline | โ | โ | โ | โ |
| Description | โ | โ | โ | โ |
| Contact info | โ (when shown) | โ (when shown) | โ (when shown) | โ (when shown) |
| Pricing & variants | โ | โ | โ | โ |
| Register button | โ (links to EasyShul) | โ | โ (links to EasyShul) | โ |
| Inline form fields | โ | โ | โ | โ |
| Inline submission | โ | โ | โ | โ |
Inline submission (free forms & events)
For forms and events with no payment required (freeForm: true or
freeEvent: true), the widget automatically renders the registration
form fields inline and handles submission directly. No redirect to EasyShul is
needed — the registration is created via the server's submission proxy.
The widget fetches the field definitions from the template endpoint
(/api/{orgKey}/forms/{formId}/template or
/api/{orgKey}/events/{eventId}/template), renders appropriate
input types (text, email, phone, radio buttons, checkboxes, dropdowns, textareas),
validates required fields, and submits via the corresponding submit endpoint.
Notes
- The widget renders into the element immediately before the
<script>tag. The example uses an empty<div>as the target. - Fonts are inherited from the host page — the widget intentionally does not load any web fonts.
- Once the registration deadline has passed, the Register button (or form fields) is hidden and a "Registration closed" notice is shown.
- The embed loads form/event data via the JSON API, which uses your organization's public read-only token. No login required.