WordPress powers more websites than any other platform, and there are at least four different ways to add an external script to a page. Which one is right for you depends on your editor, your theme, and how widely you want the calculator to appear.
This guide covers all of them — from the simplest (a single Gutenberg block) to the most powerful (injecting the script site-wide through your theme or a plugin).
Get your embed code first
Before touching WordPress, build your calculator in EmbedQuote and copy the embed snippet from your dashboard. It looks like this:
<script
src="https://embedquote.com/embed.js"
data-calculator-id="your-calculator-id-here">
</script>
You'll paste this into WordPress using one of the methods below.
Method 1: Gutenberg Custom HTML block (recommended)
If you're using the WordPress block editor (Gutenberg), this is the fastest approach and requires no plugins.
- Open the page or post where you want the calculator to appear.
- Click the + icon to add a new block.
- Search for "Custom HTML" and select it.
- Paste your EmbedQuote
<script>tag into the block. - Click Preview to confirm it appears, then Publish or Update.
Method 2: Classic Editor
If you're still using the Classic Editor (or a theme that uses it), the process is similar but lives in a different place.
- Open your page or post for editing.
- In the editor toolbar, click the Text tab (not Visual) to switch to HTML view.
- Position your cursor where you want the calculator to appear.
- Paste your EmbedQuote snippet.
- Switch back to Visual to see a placeholder, then publish.
Don't paste the script tag in Visual mode — the editor may strip or encode the HTML, breaking the embed.
Method 3: Elementor HTML widget
Elementor users can add the calculator without leaving the visual builder.
- Edit your page with Elementor.
- Search for the HTML widget in the left panel.
- Drag it onto your canvas where you want the calculator.
- Paste your EmbedQuote snippet into the HTML field on the left.
- Click Update. The calculator renders live in the builder.
Elementor executes scripts inside its editor, so you'll see the actual calculator while designing — not just a placeholder.
Method 4: Divi Code Module
Divi users can use the Code module (found in the Divi Builder under "Other").
- Add a new Code module to your row/column.
- Paste your embed snippet into the code field.
- Save and preview.
Divi's Code module handles script tags well and doesn't strip or escape them.
Adding the calculator to every page
If you want the calculator available across your entire WordPress site — in a sidebar widget, sticky footer, or persistent chat-style widget — add the script to your theme's footer instead of individual pages.
The cleanest way to do this without editing theme files directly is with a plugin like Insert Headers and Footers (free, by WPCode):
- Install and activate the plugin.
- Go to Settings → Insert Headers and Footers.
- Paste your embed snippet into the Scripts in Footer box.
- Save. The script now loads on every page.
Common WordPress gotchas
Caching plugins
Caching plugins like WP Rocket, W3 Total Cache, and LiteSpeed Cache shouldn't interfere with EmbedQuote since the calculator configuration is fetched dynamically at runtime. However, if you're seeing stale content, temporarily disable your cache plugin and reload to rule it out.
Script sanitization
Some security plugins (like Wordfence or iThemes Security) have settings that block external scripts. If your calculator appears as a blank space on the live page but no error shows in the editor, check your security plugin's script whitelist settings and add embedquote.com as an allowed external domain.
Theme script loading
A few lightweight themes load scripts in the <head> only, which can prevent footer scripts from running correctly. EmbedQuote's embed script is designed to work in both positions — if you're having trouble, try moving it from the footer to the header.
Build your quote calculator in minutes
No plugins, no coding, no monthly WordPress add-ons. Just a script tag.
Get started →