Developer guide : WordPress

A 3D configurator
on WordPress.
2 lines of code.

<viewer-3dvue> is a native Web Component. It works in any WordPress context : Elementor HTML widget, Gutenberg block, shortcode, custom PHP template, CPT with ACF. No dedicated plugin, no dependency.

Compatible WordPress 6+

Elementor HTML widget

Native Gutenberg block

PHP shortcode

add_action('wp_enqueue_scripts', function() {
  wp_enqueue_script(
    'viewer-3dvue',
    'https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js',
    [], null, true
  );
});

<viewer-3dvue
  name="myViewer"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
></viewer-3dvue>

<!-- That's it. -->

No developer?

Build your configurator yourself.

The guide above is for developers integrating a configurator custom-built by 3DVue. If you already have the 3D files for your products and want to create and publish your own configurator without writing code, use the 3DVue software. For each product, it generates:

A direct link: the configurator's URL, to place on a page, in an email or on social media.
An iframe embed code: to paste into a custom HTML block in the block editor (Gutenberg) or an Elementor HTML widget.
A widget: a script to paste once via a plugin such as Insert Headers and Footers, which adds a "View in 3D" button to your pages.

Free for 14 days, then from €49 excl. VAT per month, with no commission on your sales.

Try it free Discover the software

+94%

more conversions on listings with a 3D model

Source: Shopify

−40%

fewer returns after 3D product visualization

Source: Shopify

66%

of buyers more confident with a 3D configurator

Source: 2023 study

82%

of visitors activate the 3D view when available

Source: Cappasity

Load the script : 3 ways

The recommended method is wp_enqueue_script() in functions.php. You can also include it via WPCode (global snippet), or directly in an Elementor HTML widget if you don't want to touch any files.

If you use WPCode, create an "HTML" type snippet with the <script> tag and activate it on all pages or only product pages.

// 1. Via functions.php (recommended)
add_action('wp_enqueue_scripts', function() {
  wp_enqueue_script('viewer-3dvue', 'https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js', [], null, true);
});

// 2. Via WPCode : global HTML snippet
<script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>

// 3. In an Elementor HTML widget
<script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
<viewer-3dvue name="myViewer" src="..."></viewer-3dvue>

2

Place the component

Paste the tag in your PHP template, in an Elementor HTML widget, or via a shortcode. For CPTs with ACF, you can conditionally display it based on a custom field value.

On this site, 3DVue uses exactly this method : Elementor HTML widget, no plugin, no PHP code. The tag is pasted directly into the widget.
product-template.php : with ACF
```
<?php
// Retrieve the configurator ID from an ACF field
$viewer_id = get_field('configurateur_3d_id');
?>

<?php if ($viewer_id) : ?>
<viewer-3dvue
  name="myViewer"
  src="https://app.3dvue.fr/view?p=<?php echo esc_attr($viewer_id); ?>"
></viewer-3dvue>
<?php endif; ?>
```

Wire up your variant selectors

WordPress has no native variation system : everything is done via your custom HTML components. Add the viewer-3dvue attributes to your product configuration buttons or selects. No JS to write.

<!-- Custom color buttons -->
<button
  viewer-3dvue="myViewer"
  viewer-3dvue-clic="setMaterial"
  viewer-3dvue-meshs-materials='{"1":"0n","2":"1a"}'
>Natural oak</button>

<!-- Finish select -->
<select
  viewer-3dvue="myViewer"
  viewer-3dvue-change="setMaterial"
  viewer-3dvue-mesh="1"
>
  <option value="0n">Matt black</option>
  <option value="1a">Matt white</option>
  <option value="2b">Oak</option>
</select>

Via a PHP shortcode

// In functions.php
add_shortcode('configurateur3d',
  function($atts) {
    $id = $atts['id'] ?? '';
    return '<viewer-3dvue name="v"
      src="https://app.3dvue.fr/view?p='
      . esc_attr($id)
      . '"></viewer-3dvue>';
  }
);

// In the editor:
// [configurateur3d id="AB01-CD02"]

Custom HTML Gutenberg block

Without any PHP code : paste directly into a Gutenberg "Custom HTML" block. The script must already be loaded globally.

<!-- Gutenberg Custom HTML block -->
<viewer-3dvue
  name="myViewer"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
></viewer-3dvue>

<!-- Variation buttons in the same block -->
<button
  viewer-3dvue="myViewer"
  viewer-3dvue-clic="setMaterial"
  viewer-3dvue-meshs-materials='{"1":"0n"}'
>Black</button>

Integration with wp_localize_script() Pass PHP data (configurator ID from ACF) to the viewer JS

// functions.php : pass ACF data to JS
wp_localize_script('my-script', 'ViewerConfig', [
  'viewerId' => get_field('configurateur_id'),
  'materials' => get_field('materials_map'),
]);

// my-script.js
const viewer = document.querySelector('viewer-3dvue');
viewer.setMaterial(ViewerConfig.materials);

setMaterial() / loadModel() / addModel() Same API as on all platforms : full reference in the documentation

const viewer = document.querySelector('viewer-3dvue[name="myViewer"]');

// Change materials
viewer.setMaterial({ "1": "0n", "3": "2b" });

// Load another model
viewer.loadModel("AB01-CD02");

// Capture the render (e.g. order preview)
viewer.captureToBase64();
viewer.addEventListener("onCaptureBase64Complete", (e) => {
  console.log(e.detail.base64);
});

Frequently asked questions

Do I need a plugin to add the 3D configurator to WordPress?+

No. The <viewer-3dvue> component loads with wp_enqueue_script() or is pasted into an Elementor HTML widget or a Gutenberg HTML block. For a faster start, an iframe code or a widget pasted once also works.

Is it compatible with Elementor and Gutenberg?+

Yes. Paste the tag into an Elementor HTML widget or a custom HTML block of the block editor. A PHP shortcode is also possible.

Can I use it with custom post types and ACF?+

Yes. Paste the tag into your PHP template and condition its display on your ACF fields or your custom post type, product by product.

How much does a 3D configurator for WordPress cost?+

A custom-built configurator starts at €5,000 excl. VAT, quoted per project: modeling, an interface in your brand style, integration, hosting and human support are included. To try it yourself, the self-service software is free for 14 days with no credit card, then from €49 excl. VAT per month.

Ready to integrate?
We handle the 3D models.

You manage the code on the WordPress side, we handle everything else : modeling, materials, configuration. In 30 minutes we tell you what we can do.

Script provided at delivery : ready to enqueue

Compatible Elementor, Gutenberg, Divi, Bricks

Direct support with the API developer

This site runs on this exact integration

A 3D configurator
on WordPress.
2 lines of code.

Build your configurator yourself.

Ready in 3 steps. Several ways to integrate it.

Shortcode, Gutenberg
or Elementor widget.

For advanced use cases.

Frequently asked questions

Do I need a plugin to add the 3D configurator to WordPress?+

Is it compatible with Elementor and Gutenberg?+

Can I use it with custom post types and ACF?+

How much does a 3D configurator for WordPress cost?+

Ready to integrate?
We handle the 3D models.

A 3D configurator on WordPress. 2 lines of code.

Build your configurator yourself.

Ready in 3 steps. Several ways to integrate it.

Shortcode, Gutenbergor Elementor widget.

For advanced use cases.

Frequently asked questions

Do I need a plugin to add the 3D configurator to WordPress?+

Is it compatible with Elementor and Gutenberg?+

Can I use it with custom post types and ACF?+

How much does a 3D configurator for WordPress cost?+

Ready to integrate?We handle the 3D models.

A 3D configurator
on WordPress.
2 lines of code.

Shortcode, Gutenberg
or Elementor widget.

Ready to integrate?
We handle the 3D models.