# Add a Support Widget to WordPress — Without Coding *Ship a professional support widget on your WordPress site in **under 10 minutes**. No plugins required (optional plugin method included).* > **You’ll set up:** > - A **floating launcher** that opens a support form on any page, **or** > - An **inline form** embedded directly inside a WordPress page > - Optional: language, dark/light theme, prefilled fields, analytics events --- ## What you’ll need (1 minute) - An **InstaSupport** account and **one Source** configured - Your **Source ID** (UUID format, e.g., `b54c9bd6-2144-4591-8197-cbac7d2d13c7`) - Dashboard → **Sources** → click your Source → **copy Source ID** --- ## Which setup should I use? - **Path A — Floating launcher (default):** Adds a round button (bottom corner). Click opens the support form in a modal. Great when you want **support everywhere** with a tiny footprint. - **Path B — Inline form:** Embeds the form inside the content of a **Support** or **Contact** page. Great when you want **a full page** with context and SEO. You can do both: launcher site-wide **and** inline on your Support page. --- ## Path A — Site-wide floating launcher (no plugin) You’ll add two short scripts: the widget loader and the init call. We’ll place them in your theme footer so it’s available on **every page**. > Works on block themes and classic themes. You’ll paste into the footer template once. ### Step A1 — Open your footer template - WordPress Admin → **Appearance → Editor (Site Editor)** - In the **Templates** or **Template Parts**, open **Footer** ### Step A2 — Insert Custom HTML - Click **+** to add a block → search **Custom HTML** - Paste the following snippet **before** the closing `` region (in practice, any footer area works) ```html ```` ### Step A3 — Save & verify * Click **Save** in the Site Editor * Open your site in a new tab; you should see a small launcher button in the bottom corner * Click it → the support form should open in a modal --- ## Path B — Inline form on a page (Gutenberg block) You’ll create a **Support** page and place the widget inline using a Custom HTML block. ### Step B1 — Create a Support page * WordPress Admin → **Pages → Add New** → Title: **Support** (or “Contact Support”) * Add an intro paragraph (SLA, response hours, what to expect) ### Step B2 — Add a mount container + scripts * Insert a **Custom HTML** block where you want the form * Paste: ```html ``` ### Step B3 — Style the container (optional) Add a **Styles** block or use the **Additional CSS** area to give the inline container breathing room: ```html ``` ### Step B4 — Publish & test * Click **Publish** * Visit `/support` (or your chosen slug) and submit a test request --- ## Optional: use a header/footer plugin (no-code) If you prefer not to touch the Site Editor, use a header/footer injector: 1. WordPress Admin → **Plugins → Add New** → search **“WPCode”** or **“Insert Headers and Footers”** 2. Install & Activate 3. Plugin → **Header & Footer** → paste the **launcher** scripts in the **Footer** location (safe, non-blocking) --- ## Advanced options: language, theme, prefill, events You can stack these onto **Path A or B** by adding fields to the `init` call. ### Language & theme ```html ``` ### Prefill fields (save users time) ```html ``` Or use URL hash parameters (merge automatically with JS prefill): ``` https://yoursite.com/support#is_name=John&is_email=john@example.com ``` ### Track events (analytics, UI, conversions) ```html ``` --- ## Performance & GDPR/AVG checklist **Performance** * Use `` for the loader * For **inline**, don’t set fixed `height` on the container; let the widget resize automatically * If you use page caching or a CDN, **purge cache** after installation * Optional: test with **Lighthouse** and keep the inline container max-width ≤ 900px **GDPR/AVG** * The widget **does not set tracking cookies** by default * Data is only sent on **submit** * Add a short **privacy note** near the form linking to your privacy policy * If you use consent banners, ensure the widget is **not blocked** if it’s essential support functionality --- ## Troubleshooting **Widget not showing** * Double-check the script URL and that the snippet is present in the page HTML * Verify your **Source ID** is correct and the Source is **active** * Open **DevTools → Console** for any errors * If using a plugin injector, confirm scripts are in the **Footer** area **Inline layout issues** * Avoid explicit `height` on `#support-widget` container * Ensure no parent containers force height via flexbox * Listen to `resize` events for debugging: ```html ``` **Form not submitting** * Check Source status in the InstaSupport dashboard * Confirm required fields are valid * See **Network** tab for any API errors --- ## Copy-paste snippets ### Launcher (site-wide) ```html ``` ### Inline (Support page) ```html ``` ### Language + Theme + Prefill (add to either path) ```html ``` --- ## Summary & next steps You just saw two **no-code** paths to install a helpdesk widget on WordPress: * **Path A (launcher):** Ideal for site-wide availability with minimal footprint * **Path B (inline):** Perfect for a dedicated Support page with context and SEO **What to do now** 1. Copy-paste the snippet for your chosen path 2. Replace `YOUR-SOURCE-ID-HERE` with your actual Source ID 3. Add a **CTA**: “Create a free workspace — live in under 10 minutes” 4. Optional: enable **events** and **prefill** for faster responses **Happy supporting!** ✨

Stories and insights for thoughtful support teams

Find the stories that matter to you

Authors

Topics

No articles match your filters yet