What is ecomwizzard?
ecomwizzard is a multi-tenant SaaS that sits on top of a merchant's WooCommerce store and centralizes customer support, order analytics, fulfillment routing, and supplier collaboration. It provides a unified Customer Service inbox (email, Facebook Messenger, Instagram Direct, phone, live chat, and contact forms) plus AI-assisted reply drafting.
For external developers and site owners, ecomwizzard exposes two embeddable, public widgets you can drop onto any website: the Live Chat widget and the Contact Form widget. Both are documented below with the exact snippets to copy. Everything else (payments, ads, analytics, email, social channels) is connected inside the app via OAuth — see Connectors.
Live Chat widget
Add a live-chat launcher to your storefront with a single
<script> tag. The widget is
Shadow-DOM isolated (your page's CSS can't break it, and it
can't break yours) and persists the visitor's chat session in
localStorage, so the conversation survives page
navigations and reloads.
1. Get your widget key
Open your ecomwizzard app and go to
Settings → Live Chat. That page shows your ready-to-paste
snippet with your key already filled in. The
data-cs-key value is your live-chat channel's
public widget key — it's safe to expose in your page's HTML.
2. Paste the snippet
Drop this just before the closing </body> tag on
every page where you want the chat launcher, replacing
YOUR_WIDGET_KEY with the key from step 1:
<script src="https://app.ecomwizzard.com/livechat.js" data-cs-key="YOUR_WIDGET_KEY" async></script>async, so it won't block your page from rendering.
Optional configuration attributes
Most styling is controlled from Settings → Live Chat in the app
and synced to the widget automatically. You can also override a few things
inline with data-* attributes on the
<script> tag:
| Attribute | What it does | Default |
|---|---|---|
data-cs-key | Required. Your live-chat widget key. | — |
data-cs-color | Brand / accent color (any CSS color). | #2563eb |
data-cs-title | Header & launcher title. | Chat with us |
data-cs-greeting | Hero heading on the home screen. | Hi there! 👋 |
data-cs-subtitle | Hero subheading on the home screen. | How can we help you today? |
data-cs-position | Which corner the launcher sits in: right or left. | right |
data-cs-proactive | Text of the proactive teaser bubble that nudges the visitor above the launcher. | A friendly default prompt |
Example with a couple of overrides:
<script
src="https://app.ecomwizzard.com/livechat.js"
data-cs-key="YOUR_WIDGET_KEY"
data-cs-color="#0f766e"
data-cs-title="Need help?"
data-cs-position="left"
async></script>JavaScript API
Once livechat.js has loaded it exposes a global
window.EcomwizzardChat object so you can open or close
the widget from your own buttons or events (the equivalent of
Reamaze.popup()):
| Method | Description |
|---|---|
EcomwizzardChat.open() | Open the widget at its default (home) view. |
EcomwizzardChat.popup() | Alias of open() — the Reamaze.popup() equivalent. |
EcomwizzardChat.openChat() | Open straight into a live chat (respects the pre-chat name/email gate). |
EcomwizzardChat.close() | Close the widget. |
EcomwizzardChat.toggle() | Toggle open/closed. |
EcomwizzardChat.isOpen() | Returns true if the widget is currently open. |
Wire it to any element on your page — for example a "Chat with us" link in your footer:
<a href="#" onclick="EcomwizzardChat.popup();return false">Chat with us</a>Contact Form widget
The Contact Form widget embeds a native contact form anywhere on your site. Unlike a generic storefront contact-form plugin (which emails from your own support address and lands attributed to you), submissions to this form become clean customer-service tickets attributed to the real customer in your ecomwizzard inbox, and you reply by email.
1. Create & publish a form
In your ecomwizzard app, open the Customer Service Hub → Contact Forms builder, configure the fields and styling, and publish it (an unpublished draft won't load on your site). Use the Embed / "Get the code" action to view the exact snippet — it includes your form's id.
2. Paste the snippet
Put the placeholder <div> exactly where you want
the form to appear, then load the script (it inherits your page's width and
renders with inline styles so your CSS can't break it). Replace
YOUR_FORM_ID with the id from your published form:
<!-- ecomwizzard contact form -->
<div data-ecw-contact-form="YOUR_FORM_ID"></div>
<script src="https://app.ecomwizzard.com/embed/contact-form.js" async></script>data-ecw-contact-form attribute. The
loader script (/embed/contact-form.js) finds every
matching <div> on the page, fetches that form's
published config, renders it, and posts submissions to ecomwizzard.
Form fields
Every form includes these built-in fields:
| Field | Required | Notes |
|---|---|---|
name | No | The customer's name; used to attribute the ticket. |
email | Yes | Must be a valid email — this is who the ticket is attributed to and where your reply is sent. |
subject | No | Optional; can be pre-set or hidden in the builder. |
message | Yes | The body of the inquiry. |
You can also add custom fields in the builder — supported types
are text, textarea,
dropdown, checkbox, and
hidden. Each custom field is captured on the resulting
ticket. A hidden honeypot field is included automatically for spam protection,
and submissions are rate-limited per IP.
Connectors & integrations
Beyond the two embeddable widgets above, ecomwizzard connects to the platforms you already use. These are not a public developer API — you configure each one inside the app under Settings → Integrations (or, for support channels, in the Customer Service Hub → Settings → Channels), typically via a one-click OAuth flow. The list below is informational so you know what ecomwizzard can talk to.
Store
- WooCommerce — the store itself. Syncs orders, products, customers, refunds, and shipments so support and analytics have full context. Required.
Payments & disputes
- Stripe — surfaces disputes/chargebacks as they're filed, with order history attached for a fast response.
- PayPal — the same for PayPal claims, chargebacks, and Resolution Center inquiries.
Customer-service channels
- Gmail — connect a mailbox so customer emails appear in the unified inbox and replies send from your address. (Connected in CS Hub → Settings → Channels.)
- Facebook Messenger — Page DMs land in the inbox; replies send back to the customer.
- Instagram Direct — Instagram Business DMs in the same inbox.
- Phone support (RingCentral) — a voice channel for inbound/outbound calls and call logs.
- Live Chat & Contact Forms — the two embeddable widgets documented above.
Advertising & analytics
- Meta Ads (Facebook & Instagram) — attributes which ad a customer arrived through.
- Google Ads — attributes which search/campaign brought a customer in.
- Google Analytics 4 (GA4) — browsing context before a purchase.
Fulfillment, marketing & reputation
- ParcelWill — real-time courier tracking updates (requires WooCommerce).
- Klaviyo — which marketing emails a customer received; manage subscriptions.
- Reviews — Google Reviews / Business Profile, Trustpilot, Better Business Bureau, and Facebook Page reviews feed the Reviews surface.
- Guru — knowledge base that powers AI reply drafting.
Is there a public REST API?
The public, embeddable surface is the two widgets above — the
Live Chat widget (with its EcomwizzardChat
JavaScript API) and the Contact Form widget. Those are designed to be dropped
onto any external website.
The management/data API that powers the ecomwizzard dashboard (orders, products, fulfillment, customer service, etc.) is authenticated and intended for the app itself — it is not a documented public developer API, and endpoints may change without notice. If you have an integration use case that needs programmatic access, reach out to barak@refael.net.
FAQ
What is ecomwizzard?
A SaaS layer over your WooCommerce store that unifies customer support across email, Facebook, Instagram, phone, live chat, and contact forms, and adds order analytics, fulfillment routing, and AI-assisted replies. See the overview.
Do I need WooCommerce?
Yes. ecomwizzard is built around a WooCommerce store as the source of orders, products, and customers. The store connection is required; other integrations are optional.
How do I add live chat to my site?
Paste the one-line Live Chat <script> snippet with
your widget key. Full steps and options are in the
Live Chat widget section.
How do I add a contact form to my site?
Create and publish a form in the Customer Service Hub, then paste the placeholder
<div> + loader <script>.
See the Contact Form widget section.
Where do I get my widget key / form id?
The Live Chat widget key is shown in Settings → Live Chat (the snippet there has it pre-filled). The Contact Form form id is shown in the form's Embed / "Get the code" dialog in the Customer Service Hub. Both are public values safe to put in your page's HTML.
Will the widgets clash with my site's styles?
No. The Live Chat widget renders inside a Shadow DOM, and the Contact Form renders with inline styles — both are isolated from your page's CSS.
Is there a public REST API?
The public surface is the two embeddable widgets and the Live Chat JavaScript API. The management API is authenticated and app-internal. See Is there a public REST API?.
Support
Questions, integration help, or access requests: email barak@refael.net.