--- title: Getting Started order: 0 --- This documentation covers the **SimplyClub Dropins** — the connection layer that lets any e-commerce site embed SimplyClub's loyalty and rewards UI without building it from scratch. The Dropins handle the OTP login, member dashboard, benefits selection, and cart-aware reward calculation. Your site only needs to embed a script, sync the cart, and forward a few events. > [!TIP] > **Already on Shopify?** Install the official **SimplyClub Shopify app** — it wires everything described below for you automatically. The rest of this guide is for WordPress, WooCommerce, custom HTML, or any other host system. --- ## 1. Get your `poiId` Every Dropin call is scoped to a **POI** (Point of Interaction — your store / location). Without a `poiId` the Dropin cannot initialize. 1. Contact your SimplyClub account manager or support team. 2. They issue a `poiId` — an opaque string, e.g. `6821f55303f86ff040461ef4`. 3. Keep it on hand to paste into your site's script block. That is the only manual step. Everything from here is copy-paste. --- ## 2. Embed the Dropin Paste this snippet once, near the end of ``, replacing `YOUR_POI_ID`: ```html ``` That alone is enough to render the default starter button and run the OTP / dashboard flows. --- ## 3. Sync user and cart The Dropin can only personalize what you tell it about. Call these whenever your site's native state changes: ```js // User logs in on your site instance.commands.setUser({ id: "host-user-123", firstName: "Dana", lastName: "Cohen", email: "dana@example.com", phone: "+972501234567", }); // User logs out instance.commands.setUser(null); // Cart changes (add / remove / quantity / discount) instance.commands.setCart({ token: "host-cart-token", items: [ { id: "1", sku: "ABC-001", title: "Olive Oil 500ml", price: 39.9, quantity: 2 }, ], }); ``` `price` must be the **net** unit price after host-side discounts. --- ## 4. Connect to events Your site reacts to four core events the Dropin emits: ```js // User applied benefits → apply matching discount to your checkout instance.On.benefitSelectionsChanged((data) => { /* … */ }); // A SimplyClub transaction was opened → save the code as order metadata instance.On.transactionCodeCreated((code) => { /* … */ }); // A guest hit a gated screen → redirect or open your login modal instance.On.redirectToLogin(() => window.location.href = "/login"); // User picked a membership product → add to native cart, resolve() instance.On.membershipProductSelected((e) => { addToHostCart(e.product); instance.commands.setCart(getCurrentHostCart()); e.resolve(); }); ``` The full event reference is in the [**Frontend Embedding Guide**](/content/dropins/frontend-embedding-guide). --- ## 5. Send the order webhook (backend) After payment, your backend POSTs the order to SimplyClub's webhook. This is what awards points and closes the transaction. ``` POST https://dropins.simplyclub.co.il/api/v1/transaction/order-webhook ``` Required fields: `topic`, `domain`, `sc_transaction_code` (the one you captured in step 4), `order_id`, `customer_id`. Full payload + response handling is in the [**Webhook Integration Guide**](/content/dropins/webhook-integration-guide). Without this webhook, the customer sees the discount but no points are awarded and the transaction stays open. --- ## Next steps | If you want to… | Read | |---|---| | Use only our REST API — no embedded widget | [**API Without the Widget**](/content/api-quickstart) | | Embed in WordPress / WooCommerce / custom HTML | [**Frontend Embedding Guide**](/content/dropins/frontend-embedding-guide) | | Log a guest in with phone + OTP only | [**Fast Login**](/content/login/fast-login) | | Skip the phone+OTP screen — backend already knows the user | [**Login From Backend**](/content/login/server-handoff-login) | | React on your backend when a shopper logs in (SSO ticket) | [**Login Through Webhook**](/content/login/outbound-login-event) | | Wire the backend order webhook | [**Webhook Integration Guide**](/content/dropins/webhook-integration-guide) | | Dig into every command, event, and CTA | [**Technical Documentation**](/content/dropins/technical-documentation) | | See the product scope and roadmap | [**Product Requirements**](/content/dropins/product-requirements) |