๐Ÿงฉ 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.

Code samples below use this value.

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

AttributeDefaultDescription
data-accent-color#1a73e8Button background, link color
data-bg-color#fffWidget card background
data-text-color#333Body text color
data-border-color#e0e0e0Card border and divider color
data-border-radius8pxCard corner radius
data-max-width480pxMaximum card width

Content

AttributeDefaultDescription
data-button-textRegisterText on the Register / Submit button
data-success-textSubmitted 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-descriptionfalseSet to true to hide the description section
data-hide-contactfalseSet to true to hide the contact info
data-hide-pricingfalseSet to true to hide pricing and variants
data-hide-deadlinefalseSet to true to hide the submission deadline
data-hide-titlefalseSet to true to hide the title heading
data-hide-datefalseSet to true to hide the event date and duration
data-hide-locationfalseSet to true to hide the event location
data-hide-type-badgefalseSet 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 */
}
Tip: 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

  1. Edit the page where you want the widget.
  2. Click the + insert point and choose Code (under "More").
  3. Paste the snippet from above. Make sure the language is set to HTML.
  4. Click Apply and Save.
Squarespace's Code Block is available on Business plans and above. On the Personal plan, use a Markdown Block with raw HTML.

WordPress

  1. Edit the page or post.
  2. Add a Custom HTML block (Block editor) or switch to the Text tab (Classic editor).
  3. Paste the snippet and publish.

Wix

  1. Click Add Elements โ†’ Embed Code โ†’ Embed HTML.
  2. Click Enter Code, paste the snippet, and click Update.
  3. Resize the embed box to fit the rendered widget (about 480px wide).

What the widget shows

FieldPaid eventsFree eventsPaid formsFree 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.

Paid forms and events always show a Register button linking to EasyShul, since payment processing (Stripe) can only happen on the EasyShul site.

Notes