> ## Documentation Index
> Fetch the complete documentation index at: https://docs.swiftlywp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Shortcode & Block

> Embed the box builder anywhere using a shortcode or Gutenberg block.

BoxBuilder can be displayed on any page or post using either a shortcode or a Gutenberg block. This lets you place the builder anywhere — not just on the WooCommerce product page.

## Shortcode

Use the `[boxbuilder]` shortcode to embed a box builder anywhere:

```
[boxbuilder id="123"]
```

Replace `123` with the WooCommerce product ID of your box product.

### Finding the Product ID

1. Go to **Products → All Products**
2. Hover over your box product
3. The ID is shown below the product name, or in the URL when editing (`post=123`)

### Using in Page Builders

The shortcode works in all major page builders:

| Page Builder       | How to Add                                            |
| ------------------ | ----------------------------------------------------- |
| **Elementor**      | Add a Shortcode widget, paste `[boxbuilder id="123"]` |
| **Divi**           | Add a Code module, paste the shortcode                |
| **WPBakery**       | Add a Text Block or Raw HTML element                  |
| **Beaver Builder** | Add an HTML module                                    |
| **Bricks Builder** | Add a Shortcode element                               |
| **Oxygen Builder** | Add a Shortcode component                             |

## Gutenberg Block

BoxBuilder includes a native Gutenberg block for the WordPress block editor.

<Steps>
  <Step title="Edit a page or post">
    Open the page where you want the box builder in the block editor.
  </Step>

  <Step title="Add the block">
    Click the **+** button to add a block. Search for **"BoxBuilder"**.
  </Step>

  <Step title="Select a box product">
    In the block settings sidebar, select which box product to display.
  </Step>

  <Step title="Publish">
    Save or publish the page. The box builder will render on the frontend.
  </Step>
</Steps>

<Note>
  The block shows a placeholder in the editor. The full interactive box builder is only visible on the frontend.
</Note>

## Product Page Integration

By default, BoxBuilder automatically displays the builder on the WooCommerce single product page for any product that has BoxBuilder enabled. You don't need to use a shortcode or block for this.

The position on the product page is configurable — see [Builder Position](/plugins/boxbuilder/builder-position).

## Multiple Boxes on One Page

You can place multiple box builders on a single page using multiple shortcodes or blocks. Each operates independently with its own product configuration, selections, and cart integration.

```
[boxbuilder id="101"]  <!-- Chocolate Box -->
[boxbuilder id="102"]  <!-- Snack Box -->
[boxbuilder id="103"]  <!-- Gift Hamper -->
```