Add a Support Widget to WordPress — Without Coding (Step-by-Step, 2025)

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 </body> region (in practice, any footer area works)

<!-- InstaSupport widget loader -->
<script src="https://instasupport.io/widget.js" async></script>

<!-- Initialize launcher -->
<script>
  window.InstaSupport('init', {
    sourceId: 'YOUR-SOURCE-ID-HERE',
    mode: 'launcher',    // default
    position: 'br',      // br | bl | tr | tl
    text: '💬'           // emoji or short text
  });
</script>

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:

<!-- 1) Inline container -->
<div id="support-widget"></div>

<!-- 2) Loader + init -->
<script src="https://instasupport.io/widget.js" async></script>
<script>
  window.InstaSupport('init', {
    sourceId: 'YOUR-SOURCE-ID-HERE',
    mode: 'inline',
    mountSelector: '#support-widget'
  });
</script>

Step B3 — Style the container (optional)

Add a Styles block or use the Additional CSS area to give the inline container breathing room:

<style>
  #support-widget {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    background: var(--wp--preset--color--base, #fff);
  }
</style>

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:

WordPress Admin → Plugins → Add New → search “WPCode” or “Insert Headers and Footers”
Install & Activate
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

<script>
  window.InstaSupport('init', {
    sourceId: 'YOUR-SOURCE-ID-HERE',
    mode: 'launcher',      // or 'inline'
    locale: 'en',          // en, nl, es, de, fr...
    theme: 'auto'          // light | dark | auto
  });
</script>

Prefill fields (save users time)

<script>
  window.InstaSupport('init', {
    sourceId: 'YOUR-SOURCE-ID-HERE',
    prefill: {
      name: 'Jane Doe',
      email: 'jane@example.com',
      message: 'I need help with...'
    }
  });
</script>

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)

<script>
  const widget = window.InstaSupport('init', { sourceId: 'YOUR-SOURCE-ID-HERE' });

  widget.on('open', () => {
    // Example (GTM/GA):
    if (window.gtag) gtag('event', 'support_widget_opened');
  });

  widget.on('submitted', () => {
    if (window.gtag) gtag('event', 'support_request_submitted');
  });
</script>

Performance & GDPR/AVG checklist

Performance

Use <script ... async></script> 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:

<script>
  const widget = window.InstaSupport('init', { sourceId: 'YOUR-SOURCE-ID-HERE', mode: 'inline', mountSelector: '#support-widget' });
  widget.on('resize', (e) => console.log('height:', e.height));
</script>

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)

<script src="https://instasupport.io/widget.js" async></script>
<script>
  window.InstaSupport('init', {
    sourceId: 'YOUR-SOURCE-ID-HERE',
    mode: 'launcher',
    position: 'br',
    text: '💬'
  });
</script>

Inline (Support page)

<div id="support-widget"></div>
<script src="https://instasupport.io/widget.js" async></script>
<script>
  window.InstaSupport('init', {
    sourceId: 'YOUR-SOURCE-ID-HERE',
    mode: 'inline',
    mountSelector: '#support-widget'
  });
</script>

Language + Theme + Prefill (add to either path)

<script>
  window.InstaSupport('init', {
    sourceId: 'YOUR-SOURCE-ID-HERE',
    locale: 'nl',
    theme: 'auto',
    prefill: { message: `Page: ${window.location.href}` }
  });
</script>

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

Copy-paste the snippet for your chosen path
Replace YOUR-SOURCE-ID-HERE with your actual Source ID
Add a CTA: “Create a free workspace — live in under 10 minutes”
Optional: enable events and prefill for faster responses

Happy supporting! ✨

Add a Support Widget to WordPress — Without Coding (Step-by-Step, 2025)

Add a Support Widget to WordPress — Without Coding

What you’ll need (1 minute)

Which setup should I use?

Path A — Site-wide floating launcher (no plugin)

Step A1 — Open your footer template

Step A2 — Insert Custom HTML

Step A3 — Save & verify

Path B — Inline form on a page (Gutenberg block)

Step B1 — Create a Support page

Step B2 — Add a mount container + scripts

Step B3 — Style the container (optional)

Step B4 — Publish & test

Optional: use a header/footer plugin (no-code)

Advanced options: language, theme, prefill, events

Language & theme

Prefill fields (save users time)

Track events (analytics, UI, conversions)

Performance & GDPR/AVG checklist

Troubleshooting

Copy-paste snippets

Launcher (site-wide)

Inline (Support page)

Language + Theme + Prefill (add to either path)

Summary & next steps

Tags

Share this article

Add a Support Widget to WordPress — Without CodingQR

What you’ll need (1 minute)QR

Which setup should I use?QR

Path A — Site-wide floating launcher (no plugin)QR

Step A1 — Open your footer templateQR

Step A2 — Insert Custom HTMLQR

Step A3 — Save & verifyQR

Path B — Inline form on a page (Gutenberg block)QR

Step B1 — Create a Support pageQR

Step B2 — Add a mount container + scriptsQR

Step B3 — Style the container (optional)QR

Step B4 — Publish & testQR

Optional: use a header/footer plugin (no-code)QR

Advanced options: language, theme, prefill, eventsQR

Language & themeQR

Prefill fields (save users time)QR

Track events (analytics, UI, conversions)QR

Performance & GDPR/AVG checklistQR

TroubleshootingQR

Copy-paste snippetsQR

Launcher (site-wide)QR

Inline (Support page)QR

Language + Theme + Prefill (add to either path)QR

Summary & next stepsQR

Tags

Share this article

Add a Support Widget to WordPress — Without Coding

What you’ll need (1 minute)

Which setup should I use?

Path A — Site-wide floating launcher (no plugin)

Step A1 — Open your footer template

Step A2 — Insert Custom HTML

Step A3 — Save & verify

Path B — Inline form on a page (Gutenberg block)

Step B1 — Create a Support page

Step B2 — Add a mount container + scripts

Step B3 — Style the container (optional)

Step B4 — Publish & test

Optional: use a header/footer plugin (no-code)

Advanced options: language, theme, prefill, events

Language & theme

Prefill fields (save users time)

Track events (analytics, UI, conversions)

Performance & GDPR/AVG checklist

Troubleshooting

Copy-paste snippets

Launcher (site-wide)

Inline (Support page)

Language + Theme + Prefill (add to either path)

Summary & next steps