Docs  /  User Guide  /  Embed in page builders

Embed in page builders

Drop the customer-update portal anywhere a page builder can render a shortcode — Gutenberg, Elementor, Divi, Beaver Builder. No extra plugin, no build step.

Where the portal shows up by default

The customer-facing thread renders automatically on My Account → Orders → View order for the matching order. You don’t need to do anything — the plugin injects it on the standard WooCommerce View Order endpoint.

If that’s where you want it, you’re done. The rest of this page is for putting the portal somewhere else — a custom checkout confirmation page, a dashboard widget, a dedicated “Your order conversation” page you’ve built with Elementor or Gutenberg.

The one ingredient: the shortcode

The portal is exposed as a shortcode:

[order_updates_portal]

By default it auto-detects the order ID from the URL — the same mechanism the View Order page uses. If your page builder hosts the shortcode on a URL that doesn’t carry the order ID, pass it explicitly:

[order_updates_portal order_id="123"]

Every major builder accepts this shortcode as-is. No additional plugin, no native block, no widget. The same five characters work everywhere.

Gutenberg (the block editor)

WordPress ships a built-in Shortcode block. To embed the portal:

  1. Open the page in the block editor.
  2. Click the + button to add a block, type “shortcode”.
  3. Pick the Shortcode block.
  4. Paste [order_updates_portal] into the text area.
  5. Save and preview — the portal renders on the live page.

You won’t see a live preview inside the editor (the Shortcode block is render-on-output), but the front end renders exactly the same portal you see on My Account.

Elementor

  1. Open the page in Elementor.
  2. Drag a Shortcode widget into your layout (it’s under General in the widget panel).
  3. Paste [order_updates_portal] into the widget’s shortcode field.
  4. Click Update and preview.

The portal inherits its own CSS — Elementor’s theme styling doesn’t override it. Width / spacing of the surrounding Elementor section affects the portal’s container width; the portal itself is responsive down to mobile widths.

Divi, Beaver Builder, and the classic editor

All three work the same way:

  • Divi — add a Code or Text module and paste the shortcode.
  • Beaver Builder — add an HTML or Text Editor module and paste the shortcode.
  • Classic editor — just paste the shortcode anywhere in the post body.

If your builder offers a dedicated “Shortcode” module, use that — it’s slightly cleaner than wrapping the shortcode in a Text module, but functionally identical.

Authentication still applies

Embedding the shortcode somewhere new doesn’t loosen the auth gate. The portal will only show a thread when:

  • The viewer is logged in as the order’s customer, or
  • The URL includes a valid order_key for that order (the WooCommerce order key, also the credential in customer notification emails).

If neither is true, the portal renders an empty “You don’t have permission to view this order” message. So you can safely embed the shortcode on a publicly-reachable page — visitors who shouldn’t see it, won’t.

Common embed patterns

Three layouts we see most often:

  • Post-checkout confirmation page — embed the shortcode below the order summary so customers can immediately ask questions about their fresh order.
  • Dedicated “Your conversation” page — build a clean custom layout (logo + title + portal) and link to it from order emails by passing the order_key in the URL.
  • Account dashboard widget — some stores hide the default My Account view and build their own dashboard with selected blocks. The portal slots in as just another block.

None of these need code — just drop the shortcode block in the right place.

Why not a native Gutenberg block / Elementor widget?

We deliberately ship the shortcode rather than building native blocks for now. Two reasons:

  • A native Gutenberg block needs a JS build pipeline (@wordpress/scripts) and keeps pace with the Gutenberg API, which is still moving fast. Maintenance cost outweighs the small UX gain.
  • An Elementor-native widget only works if the user has Elementor installed. Shortcodes are universal.

If usage data ever shows enough builder-embed traffic to justify it, a native block / widget will land in a future addon — not the core plugin.