Booksea Widget

Appearance

Installing on WordPress ​

How to embed the Booksea widget on a WordPress site, for both the block editor (Gutenberg) and classic/page-builder setups.

See the Integration Guide first for the base snippet and available attributes — this page only covers where to paste it in WordPress.

Block editor (Gutenberg) ​

  1. Open the page or post where the widget should appear, in the WordPress editor.
  2. Add a Custom HTML block (search for "Custom HTML" in the block inserter).
  3. Paste the embed snippet:
html
<script
  type="module"
  src="https://widget.booksea.org/dist/booksea-widget.min.js"
></script>

<booksea-widget company-slug="your-slug"></booksea-widget>
  1. Click Preview to confirm the widget renders, then publish.

Don't use a Paragraph block

Pasting the snippet into a regular Paragraph or Classic block will get the <script> tag stripped or escaped as text. It must go in a Custom HTML block (or the Classic Editor's "Text"/HTML mode, see below).

Classic Editor ​

  1. Switch the editor to Text mode (top-right of the editor, next to "Visual").
  2. Paste the same snippet directly into the text area.
  3. Switch back to Visual to confirm nothing looks broken, then update/publish.

Page builders (Elementor, Divi, etc.) ​

Most builders have a HTML or Code widget/module — use that rather than a text/rich-text widget:

  • Elementor — drag in the "HTML" widget, paste the snippet.
  • Divi — use the Code module, placed on the actual page where the widget should appear.
  • Beaver Builder — use the "HTML" module.

The pattern is the same everywhere: find the raw-HTML widget, avoid anything that runs content through a rich-text/WYSIWYG sanitizer.

Divi: don't use Theme Options → Integration → Header

Divi's sitewide Theme Options → Integration → "Add code to the header of your blog" field injects the snippet into <head>, on every page, before <body> exists — the widget has nothing to attach to there and won't render correctly. Use the Code module on the specific page instead (see above).

Common issues ​

Widget doesn't appear / console shows a CSP error Some security plugins (Wordfence, Sucuri) or hosts add a strict Content-Security-Policy header. Make sure it allows:

script-src https://widget.booksea.org https://js.stripe.com;
frame-src https://js.stripe.com;

The <script> tag disappears after saving The block/widget you used runs content through WordPress's HTML sanitizer (wp_kses), which strips <script> tags outside of Custom HTML blocks. Re-add the snippet using a Custom HTML block (Gutenberg) or a Code/HTML module in your page builder — see above.

Widget shows in the editor/preview but not on the live page (WP Rocket or other JS optimizers) Caching/optimization plugins like WP Rocket minify and combine JS files by default, which breaks the widget's type="module" script. Exclude the widget script URL from minification and combination:

  • WP Rocket: Settings → File Optimization → Excluded JavaScript Files, add https://widget.booksea.org/dist/booksea-widget.min.js (or just booksea-widget.min.js).
  • Other optimizers (Autoptimize, W3 Total Cache, LiteSpeed Cache, etc.) have an equivalent "exclude from minify/combine" JS list — same fix applies.

Payment step fails / blank modal The widget requires HTTPS (see the Integration Guide). Confirm the WordPress site itself is served over https://, not http://.