Integration Guide

WordPress Widget Integration

Add Google Reviews, Instagram feeds & WhatsApp chat to WordPress — works with any theme.

Install Steps

  1. Edit any Page or Post.
  2. Add a 'Custom HTML' block (Gutenberg) or switch to 'Text' tab (Classic).
  3. Paste the generic GizmoSauce embed code.
  4. Update/Publish the page.

Option 1: Using the Gutenberg Block Editor

The WordPress block editor (Gutenberg) makes it easy to add widgets to any page or post.

Step-by-Step Instructions

  1. Edit your page or post

    • Go to Pages or Posts in your WordPress dashboard
    • Click on the page you want to edit
  2. Add a Custom HTML block

    • Click the + button to add a new block
    • Search for Custom HTML
    • Click to add it to your page
  3. Paste your widget code

    • Click inside the HTML block
    • Paste your GizmoSauce embed code
    • The block should show a gray 'HTML' label
  4. Preview and publish

    • Click Preview to see your widget (note: some themes block scripts in preview)
    • Click Update or Publish to save

Tip: If the widget doesn't show in preview, publish the page and view it directly.

Option 2: Site-Wide Widgets (Chat, Popups)

For widgets that should appear on every page of your WordPress site, use a code injection plugin instead of editing theme files.

Recommended Plugin: WPCode

  1. Install WPCode

    • Go to Plugins → Add New
    • Search for WPCode
    • Click Install Now, then Activate
  2. Add your widget code

    • Go to Code Snippets → Add Snippet
    • Click Add Your Custom Code
    • Give it a name like 'GizmoSauce Widget'
    • Set Code Type to HTML Snippet
    • Paste your GizmoSauce embed code
  3. Configure placement

    • Under Insertion, select Site Wide Footer
    • Toggle Active to ON
    • Click Save Snippet

✅ Your widget will now appear on all pages!

Alternative: You can also use the 'Insert Headers and Footers' plugin with similar steps.

Page Builders (Elementor, Divi, Beaver Builder)

If you use a page builder, follow these specific instructions:

Elementor

  1. Edit your page with Elementor
  2. Search for HTML in the widget panel
  3. Drag it to your page
  4. Paste your GizmoSauce code in the HTML field
  5. Click Update

Divi Builder

  1. Click the + to add a new module
  2. Search for Code and select it
  3. Paste your code in the Content field
  4. Click the green checkmark to save

Beaver Builder

  1. Click the + to add a module
  2. Under Basic, find HTML
  3. Drag it to your page
  4. Paste your code and click Save

Tip: All page builders work the same way—find the HTML/Code module and paste your embed code.

Need a hand?

Share a staging URL and we'll verify styling, z-index, and responsiveness for you.