Greetings friend

Welcome to EConnect+ Widget Example

This is a sample greeting widget that greets the user and welcomes them to EConnect+.


For Developers

You may use this widget as a template to create your own widgets.

Embedding a widget

Generate a signed JWT on your backend and pass it as a token query parameter to any widget URL:

<iframe
  src="https://your-domain.com/widgets/greeting?token=YOUR_JWT"
  width="400"
  height="180"
  style="border:0; border-radius:12px; overflow:hidden; background:#020617;"
></iframe>

Replace ‘greeting‘ with any registered widget slug.

Adding new widgets

  1. Add your widget .tsx file to the /lib/widgets/ directory, the definition should look like this:
    {
  slug: "upsell-panel",
  name: "Upsell panel",
  description: "Shows a contextual promotion.",
  requiresAuth: true,
  render: ({ user }) => {
    const name = (user?.name as string | undefined) ?? "there";
    return <div>Hi {name}, here is your tailored offer!</div>;
  }
}
  2. Open lib/widget-library.ts.
  3. Add a new slug to the WidgetSlug union (for example, “upsell-panel“).
  4. Add your widget to the widgets map (for example, “upsell-panel“: UpsellPanelWidget).
  5. Your widget is now reachable at /widgets/upsell-panel and can be embedded via iframe.