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. -->

+94%

more conversions on listings with a 3D model

Source: Shopify

−40%

fewer returns after 3D product visualisation

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 colour 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);
});

Ready to integrate?
We handle the 3D models.

You manage the code on the WordPress side, we handle everything else : modelling, 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.

Ready in 3 steps. Several ways to integrate it.

Shortcode, Gutenberg
or Elementor widget.

For advanced use cases.

Ready to integrate?
We handle the 3D models.

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

Ready in 3 steps. Several ways to integrate it.

Shortcode, Gutenbergor Elementor widget.

For advanced use cases.

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.