How to Embed Your TourReady Tour on WordPress

WordPress is the friendliest platform on this list to embed a tour on WordPress, because the iframe-based path has been native since 2003. The only catch: there are now three different editor surfaces (Gutenberg, Classic, page builders), and each has its own breadcrumb. This walk-through covers all three.

You don't need a plugin. You don't need a developer. You don't need to touch theme files. The walkable tour drops into the post or page content like any other block — and stays put through theme switches, plugin updates, and WordPress core upgrades.

What you'll need

1. Your TourReady tour URL: https://tourready.ai/t/your-slug.
2. An Editor or Administrator account on the WordPress site.
3. WordPress.org (self-hosted, no restriction) OR WordPress.com Business plan or higher.

If you don't have a tour yet, generate one first. One photo, two minutes. Start your tour →

Embed tour on WordPress: Gutenberg

Gutenberg is the block editor. It's the default on every WordPress install since 2018. Here's the five-step path to embed a tour on WordPress with Gutenberg.

1. Open the post or page. WordPress admin › Posts (or Pages) › pick yours › Edit.
2. Add a block. Click the + button between two existing blocks › search "Custom HTML" › insert.
3. Paste the snippet:

   <div style="position:relative;padding-bottom:62%;height:0;overflow:hidden;border-radius:12px;">
     <iframe src="https://tourready.ai/t/your-slug"
       style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"
       allow="fullscreen; xr-spatial-tracking"
       loading="lazy"></iframe>
   </div>

4. Preview. Use the Preview button in the top-right. Gutenberg renders the iframe inline.
5. Publish or Update. The block stays in the post regardless of theme or plugin changes.

Embed tour on WordPress: Classic editor

If you're on the Classic editor (still active on ~30% of WordPress sites), the path is similar but uses tabs instead of blocks.

1. Open the post or page. WordPress admin › Posts › Edit.
2. Switch to the Text tab. Top-right of the editor, next to Visual.
3. Paste the snippet (same six lines as above) at the point where you want the embed.
4. Switch back to Visual to confirm the block renders.
5. Update. The embed persists through editor reloads.

The Classic editor occasionally strips the loading="lazy" attribute on save. If page-speed scores tank, re-paste in Text mode and don't switch back to Visual before saving.

"One photo is enough. Two lines of HTML is enough. Don't let the platform talk you out of either."

Elementor, Divi, Beaver Builder

Every major WordPress page builder ships an HTML widget. Same snippet, different breadcrumb.

Specific page-builder breadcrumbs:

• Elementor: Edit with Elementor › drag HTML widget › paste snippet › Update.
• Divi: Enable Visual Builder › add Code module › paste snippet › Save.
• Beaver Builder: Page Builder › drag HTML module › paste snippet › Publish.

If you haven't generated your tour yet, the embed waits on the photo. Start your tour →

Troubleshooting

Three things break 90% of WordPress embeds. All four are easy to check.

1. Wrong plan tier. WordPress.com free / Personal / Premium block iframe embeds. Upgrade to Business or migrate to .org.
2. Security plugin stripping the iframe. Wordfence, Sucuri, and similar can sanitize iframes. Whitelist tourready.ai in the plugin's allowed domains.
3. Caching plugin serving an old version. Clear your WP Rocket / W3 Total Cache / LiteSpeed cache after pasting the snippet.
4. Mobile theme override. Some legacy themes load a separate mobile template. Test on actual mobile, not just resized desktop.

Frequently asked questions