Skip to Content
PublishingInstall on your websiteWordPress

How to add a widget to WordPress

Embed your Shareables widget on your WordPress site.

Copy your widget’s embed code

Open the Share modal in your widget editor and copy your embed code. See How to install on your website for detailed steps.

Choose your page builder and add the code

Add a Custom HTML block:

  1. Edit your WordPress page or post
  2. Click + to add a new block
  3. Search for Custom HTML
  4. Add the Custom HTML block

Paste the code:

  1. Paste your Shareables embed code into the block
  2. Click Preview to see a preview
  3. Click Update or Publish to save

If you’re using the Classic Editor, switch to the Text/HTML view and paste the code there.

Troubleshooting

Widget appears in the page footer (or wrong location)

This happens when a WordPress optimisation plugin (WP Rocket’s “Delay JavaScript Execution”, Autoptimize, LiteSpeed Cache, or the Avada theme’s defer-JS feature) moves the embed <script> tag to the bottom of the page for performance. It’s typically only visible to logged-out visitors — admins see the widget in the right place because cache plugins skip optimisation for logged-in users.

Fix: copy a fresh embed code from your widget’s Share modal. The new two-tag embed format uses a <div> placeholder that anchors the widget at the correct location regardless of where the optimisation plugin ends up moving the script.

If you’d rather not re-copy the snippet, you can also drop a placeholder <div> next to your existing script tag in the same Code block. The script will mount the widget there:

<!-- Your existing script -->
<script src="https://YOUR_SITE_ID.shareables.ai/embed.js"></script>
<!-- Add this line right next to it -->
<div data-shareables-embed></div>

Widget shows a loading spinner, then nothing (page-speed plugins)

This is different from the issue above. Here the widget starts to load — you see a brief spinner — but the content never appears. It often shows up only on mobile or for logged-out visitors.

Cause: a page-speed plugin (WP Rocket, Autoptimize, LiteSpeed Cache, SG Optimizer…) doesn’t just defer the script — it minifies and copies Shareables’ embed.js into its own cache folder (e.g. /wp-content/cache/min/…/embed.js). Once the file has been moved, the widget can’t tell where to load its content from, so it spins forever. Clearing the cache alone does not fix this — the plugin re-creates the moved copy.

Fix: tell the plugin to leave the Shareables script alone by excluding it from JavaScript optimization.

  1. Go to Settings → WP Rocket → File Optimization
  2. In the Excluded JavaScript Files box (under “Minify JavaScript files”), add this on its own line: 
    (.*)/embed.js
  3. Scroll down to Delay JavaScript execution and add the same line to its exclusion box too
  4. Click Save Changes, then clear the cache from the top admin bar (WP Rocket → Clear cache)

Use (.*)/embed.js — that’s the wildcard format these plugins expect (a literal * won’t work). Entering just your widget’s domain (for example shareables.ai, or your custom domain) also works.

After saving, reload the page in a private/incognito tab so you’re not seeing your browser’s own cached copy.

Widget not showing

  • Clear your WordPress cache (if using a caching plugin)
  • Check if your theme or security plugin is blocking scripts
  • Verify the embed code is complete

Broken layout

  • Ensure the Custom HTML block has enough width
  • Check for theme CSS conflicts
  • Try adding the widget to a full-width section

WP Security Ninja

If you’re running a WordPress site, we recommend WP Security Ninja  to keep it secure. It’s a comprehensive security plugin that protects against threats, vulnerabilities, and attacks — one of the first plugins you should install on any WordPress site.

Last updated on
WebflowSquarespace