Embed JavaScript widgets

Sign-up, membership application, questionnaire, donations, vouchers and event moments with one script and one div on any website, with no framework and no WordPress needed.

The JavaScript widgets bring features of vynst (inwendo ERP) to any website: WordPress, Typo3, Wix, Jimdo, a static site or your own app. A widget consists of a script and a placeholder. It needs no framework, and the design of your site stays untouched.

The fastest way: the embed code generator

In vynst, under Ext. connections (API) → JS Website Embed, you put together a widget, see a preview with your real data, and copy the finished code. The generator supports questionnaire, event sign-up, registration and donations.

Embedding

Every installation serves the scripts itself:

<div data-iw-event-signup
     data-iw-host="club.iw-erp.de"
     data-iw-event-id="523"></div>

<script src="https://club.iw-erp.de/frontend_assets/backend/iw_erp_web_ui/event-signup.js" async></script>

• data-iw-host is the address of your installation, with or without https://. All requests go there over HTTPS.
• After loading, the script looks for all matching placeholders on the page and starts a widget in each. Several widgets on one page are no problem.
• Each widget renders into its own Shadow DOM. CSS of your site does not affect the widget, and the widget does not leak out.
• Modern browsers are the target. There are no polyfills for old browsers.

Enable in vynst

The widgets call the API of your installation directly from the visitors’ browsers. For the browser to allow this, add your website under CORS - Permitted origins (cors_allow_origin) in vynst. Separate several entries with commas:

https://www.our-club.org,https://our-club.org

Depending on the widget, you also need the feature in vynst, such as self-registration, donation goals, vouchers or the payment provider. This is described on the widget’s page.

Styling

Without further settings, you get a neutral design. With attributes, you adapt it to your site:

<div data-iw-registration
     data-iw-host="club.iw-erp.de"
     data-iw-theme="soft"
     data-iw-theme-highlight="#005f66"
     data-iw-theme-font="Inter, sans-serif"
     data-iw-theme-radius="8"
     data-iw-theme-density="compact"></div>

Individual values take precedence over the template. The same values are available as CSS variables (--iw-color-highlight, --iw-font-family, --iw-radius and so on), which you can set on the placeholder.

Change texts

Every text can be overwritten, either one at a time or as JSON:

<div data-iw-event-signup
     data-iw-host="club.iw-erp.de"
     data-iw-event-id="523"
     data-iw-text-send="Save my place"
     data-iw-texts='{"success": "Thanks, see you there!"}'></div>

The texts of the widgets are in German by default. For an English site, overwrite them this way.

Without HTML access: shortcodes

If your site builder does not allow HTML but does allow the script, write a shortcode into the text. The widget replaces it when loading:

[iw-event-signup host="club.iw-erp.de" event-id="523"]
[iw-registration host="club.iw-erp.de" people="multi"]
[iw-donation host="club.iw-erp.de" goal-id="7"]

The options are named like the attributes, without data-iw-.

Control with JavaScript

For single-page apps or content that is loaded later, you start widgets yourself:

const el = document.querySelector('#anmeldung');
await window.IwEventSignup.mount(el, { host: 'club.iw-erp.de', eventId: '523' });

// Collect placeholders that were loaded later
window.IwEventSignup.scan(document.body);

The objects are called IwEventSignup, IwRegistration, IwQuestionnaire, IwDonation, IwVoucher and IwEventMoments. Options are named like the attributes in camelCase (data-iw-event-id becomes eventId). Colors can also be passed as an object: theme: { highlightColor: '#005f66' }.

Events

Each widget reports what happens as a DOM event on the placeholder. This lets you count sign-ups in your statistics or show content:

el.addEventListener('iw:event-signup:submitted', (event) => {
  console.log(event.detail.statusCode, event.detail.data);
});

<widget> is event-signup, registration, register-multi-person, questionnaire, donation, voucher or event-moments. For submitted, detail.data contains the response from vynst, for a sign-up for example with names. Do not pass it on unfiltered to analytics services.

Payment

Paid sign-ups, donations and vouchers open the payment page of your payment provider in a new window. If the browser blocks this, the whole page switches to the payment. Setup: Payment providers.

Privacy

• The widgets do not set any cookies.
• So that nothing gets lost, registration, membership application, donations and vouchers remember unfinished input in the browser (localStorage) for about one day. For simple registration, this includes the bank details. For membership application and donations, it does not. Mention this in your privacy policy.
• All data goes directly to your vynst installation, not to third parties.