Astrology and tarot practitioners who run WordPress sites face a specific problem: the platform has no native widget type for interactive card draws. You can write about tarot. You can sell tarot readings. Adding an interactive tarot experience - a daily card, a three-card draw, a full Celtic Cross - requires an embed from an external provider.

This guide covers the mechanics. How to get an embed code, where to put it in WordPress, and what breaks.

What you need before starting

- A WordPress site (self-hosted WordPress.org or WordPress.com Business plan and above)
- Access to the WordPress block editor (Gutenberg) or a page builder like Elementor or Divi
- An embed code from a tarot widget provider - either an `<iframe>` snippet or a JavaScript loader

You do not need to touch PHP. You do not need a developer. The entire process is HTML copy-paste inside the WordPress admin.

Step 1: Get your embed code

Go to your widget provider and find the embed or share option for the widget you want. You will receive one of two things:

Option A - iframe snippet:
```html
<iframe
src="https://widgets.example.com/tarot-daily?theme=light"
width="100%"
height="520"
frameborder="0"
scrolling="no">
</iframe>
```

Option B - JavaScript loader:
```html
<div id="tarot-widget"></div>
<script src="https://widgets.example.com/embed.js" data-widget="tarot-daily"></script>
```

Copy the full snippet. You will paste it in the next step. Do not modify the `src` URL - the provider's parameters in that URL control the widget behavior.

If you are using Esotier widgets, get your embed code from the store or from the free widgets page.

Step 2: Add to WordPress with an HTML block

Open the page or post where you want the widget to appear. In the block editor (Gutenberg):

1. Click the + icon to add a new block
2. Search for Custom HTML and select it
3. Paste your embed snippet into the block's text field
4. Click Preview in the top bar to verify the widget loads before publishing

In Elementor or Divi, the equivalent is the HTML widget (Elementor) or Code Module (Divi). Drag it onto your layout, paste the snippet, save.

Classic editor (pre-Gutenberg): Switch the editor to Text mode (not Visual), position your cursor where you want the widget, and paste the snippet directly into the HTML.

Step 3: Make it responsive

Most iframe embeds default to a fixed pixel width. On mobile, a 600px-wide iframe inside a 375px screen causes a horizontal scroll bar. Fix this with a CSS wrapper:

```html
<div style="max-width: 100%; overflow: hidden;">
<iframe
src="https://widgets.example.com/tarot-daily"
width="100%"
height="520"
frameborder="0"
scrolling="no">
</iframe>
</div>
```

Set `width="100%"` on the iframe itself and wrap it in a div with `max-width: 100%`. The height is harder - iframes do not resize height automatically based on content. Check whether your provider offers a JS-based resize option. If not, set a height that works on mobile (usually 480-560px for a single-card widget) and accept that it will have extra space on desktop.

Step 4: Test on mobile

In the WordPress block editor, use the Preview dropdown and select Mobile. This shows you a narrow viewport approximation. For a real test, open the published URL on your phone.

Check two things: the widget loads (not blank), and there is no horizontal scroll. If either fails, see the troubleshooting section below.

Plugin approach vs. iframe vs. JS loader

iframe is the simplest and most reliable. The widget runs in a sandboxed document. Your WordPress theme CSS cannot accidentally break it. It works in every page builder. The main downside is fixed height and limited communication between the widget and your page.

JavaScript loader gives the provider more control - the widget can resize its container, send events to your page, and interact with other scripts. It is also more fragile: a Content Security Policy (CSP) header that blocks third-party scripts will kill it silently.

WordPress plugin (when available) is the most integrated option. The provider's plugin registers a shortcode or block you drop anywhere. Updates happen through the WP plugin updater. Downside: another plugin in your stack, and plugin-based widgets are less portable if you migrate off WordPress.

For most practitioners, the iframe approach is the right default. It works without configuration and does not require trusting a third-party plugin with admin access to your site.

Troubleshooting

Widget shows as blank / white box The most common cause is a Content Security Policy header blocking the iframe source domain. Check your browser's developer console (F12 → Console tab) for a CSP error message. If you are using a security or performance plugin (Wordfence, WP Rocket, Cloudflare), look for a setting called "Block Iframes" or "Frame Options" and whitelist the widget domain.

Widget is cut off or has a scrollbar inside it The iframe height is set too small. Increase the `height` attribute in your snippet. Also check that `scrolling="no"` is set - without it, some browsers add a scroll bar inside the widget frame.

z-index conflict with page builder overlays If a floating header or page builder sticky element overlaps the widget, add `position: relative; z-index: 1;` to your wrapper div. Most page builders have a z-index setting on individual elements - set your HTML block's z-index higher than the overlapping element.

Widget loads in editor but not on the live site Caching plugins (WP Rocket, W3 Total Cache, LiteSpeed Cache) sometimes serve a cached page that loaded before the script tag was added. Clear your cache after adding the widget. If your host uses server-level caching (common on managed WordPress hosts), clear that as well.

--- Try Esotier's Daily Oracle Card Widget — a free daily card embed that refreshes at midnight and works in any WordPress HTML block. Browse the full widget catalog at /store or see all free embeds at /free-widgets.