Embedding Compositions

Three ways to embed

Physicks gives you flexibility to embed your composition in any context:

• Shortcode — works everywhere, including page builders, widgets, and custom HTML blocks.
• Gutenberg block — native integration with the WordPress block editor.
• Page builders — Elementor, WPBakery, Beaver Builder, Divi, and others.

All three methods produce the same result. Choose the one that fits your workflow.

Method 1: Shortcode

The shortcode is the universal way to embed a Physicks composition. It works in any place that accepts shortcodes — pages, posts, widgets, custom HTML blocks, page builder elements, theme templates, and more.

Basic usage

After saving a composition, you’ll see its shortcode displayed near the title in the editor:

[physicks id="123"]

Copy that shortcode and paste it wherever you want the composition to appear. Save the page or post, and visit it on the frontend — your composition will render there, fully interactive.

Where to find the shortcode again

If you’ve closed the editor and need the shortcode, go to Physicks → Compositions. The shortcode for each composition appears next to its title in the list.

Pasting in different contexts

The shortcode behaves the same regardless of where you paste it:

• Inside a paragraph or block in the WordPress editor.
• Inside a Custom HTML block in Gutenberg.
• Inside a Shortcode element in Elementor, WPBakery, Beaver Builder, etc.
• Inside a widget in the WordPress widget area.
• Inside a theme template file, using PHP: <?php echo do_shortcode('[physicks id="123"]'); ?>

Method 2: Gutenberg block

If your site uses the WordPress block editor (Gutenberg), you can embed compositions directly with the Physicks block.

Adding the block

1. In the block editor, click the + button to insert a new block.
2. Search for Physicks in the block library.
3. Select the Physicks block.
4. Choose your composition from the dropdown that appears.

The block displays a server-rendered preview of your composition right inside the editor, so you can see what it will look like before publishing.

When to use the block over the shortcode

The block is more convenient when:

• You’re already working in Gutenberg.
• You want to see a live preview while editing.
• You want to discover available compositions without copy-pasting shortcodes.

The shortcode is more convenient when:

• You’re working in a page builder (Elementor, WPBakery, etc.).
• You’re embedding the composition in a widget or theme file.
• You want to share the same shortcode across multiple pages or sites.

Method 3: Page builders

Most popular page builders support shortcodes through a dedicated element. Here’s how to embed a composition in the most common ones.

Elementor

1. Edit your page with Elementor.
2. From the left panel, drag a Shortcode widget onto the page.
3. Paste your Physicks shortcode in the widget’s settings: [physicks id="123"].
4. Update the page.

WPBakery (Visual Composer)

1. Edit your page with WPBakery.
2. Click the + to add a new element and choose Text Block.
3. Paste your Physicks shortcode inside the text block: [physicks id="123"].
4. Save the page.

Beaver Builder

1. Edit your page with Beaver Builder.
2. Add an HTML module to your row.
3. Paste your Physicks shortcode in the HTML field.
4. Save and publish.

Divi

1. Edit your page with Divi Builder.
2. Add a Code module to your section.
3. Paste your Physicks shortcode in the code field.
4. Save the page.

For other page builders, look for an element labeled “Shortcode,” “HTML,” “Code,” or “Text” — Physicks works with all of them.

How rendering works

When a page containing a Physicks shortcode loads, the plugin:

1. Renders the HTML structure of the composition directly in the page (no AJAX required). This means search engines can read the content.
2. Loads the physics engine and assets only on pages where a composition is embedded — never globally. This keeps the rest of your site fast.
3. Initializes the simulation when the canvas enters the viewport, ensuring smooth performance even on long pages with multiple compositions.

You can have multiple compositions on the same page — each one runs independently.

Sizing and responsive behavior

The composition’s canvas scales automatically to fit the width of its container, while preserving the aspect ratio you defined in the editor. This means:

• If you embed the shortcode inside a 600px-wide column, the canvas scales to 600px wide.
• If the container is full width on desktop and narrower on mobile, the canvas adapts on both.
• The internal layout (object positions, sizes) reacts to the active breakpoint (Desktop, Tablet, Mobile) based on the visitor’s screen size.

For full control over how your composition adapts to different screens, see the Responsive Design guide.

Background mode

If you want to use a composition as the background of an entire section (a hero, for example), enable Background Mode in the bottom panel of the editor under the Canvas group.

In this mode, the composition fills its parent container and other content can sit on top of it. Use it together with WPBakery rows or Gutenberg group blocks for full-width hero sections with physics-powered backgrounds.

Caching plugins

Physicks works with all major WordPress caching plugins (WP Super Cache, W3 Total Cache, WP Rocket, LiteSpeed Cache, and others).

In the unlikely case that you experience a stale composition appearing on the frontend after editing, enable Cache Compatibility Mode in Physicks → Settings → Performance. This adds a version string to plugin assets, forcing caches to refresh.

Troubleshooting

If your composition doesn’t appear on the frontend:

• Check the shortcode. The format must be exactly [physicks id="123"] — no extra spaces, correct quotes.
• Check the composition is published. If it’s in draft state, the shortcode won’t render anything.
• Check for shortcode conflicts. Some themes or plugins disable shortcodes in certain contexts. Try embedding in a different page or block to isolate the issue.
• Clear your cache. After embedding a new composition, caches may need to refresh. Clear your caching plugin and your browser cache.
• Check the browser console. JavaScript errors from other plugins can prevent Physicks from initializing. Look for errors in the developer tools console.

If none of the above resolves the issue, contact us at support@physicks.pro with the URL of the page and a screenshot of the browser console.