EasyShul EasyShul Public APIs

🧩 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:

    


    

      Descriptions from EasyShul are sanitized by DOMPurify, bundled into the widget without
      loading an external script. Standard text formatting, lists, tables, HTTP(S) images,
      and HTTP(S), email, and phone links are retained. Scripts, event handlers, embedded forms,
      frames, SVG, and custom CSS are removed. The data-description override is
      always displayed as plain text.
    


    
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. 
      
  2. Click the + insert point and choose Code (under "More").
    3. 
      
  3. Paste the snippet from above. Make sure the language is set to HTML.
    4. 
      
  4. Click Apply and Save.
    5. 
    

    

      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. 
      
  2. Add a Custom HTML block (Block editor) or switch to the Text tab (Classic editor).
    3. 
      
  3. Paste the snippet and publish.
    4. 
    


    
Wix

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


    
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