Documentation: Paus AR Viewer - 3D and AR for WordPress Elementor

In this documentation you will find an introduction to the basic functions and techniques of PausAR Viewer for Elementor, as well as instructions for creating AR content on the web.

PausAR for Elementor is a plugin for the popular WordPress platform used to create and maintain websites. PausAR itself extends the functions of Elementor, which is itself a WordPress plugin and integrates a modular system and widgets for the creation of websites. Current versions of WordPress and Elementor are required and recommended for the installation of PausAR.

Minimum Requirements for PausAR for Elementor:

ServerClient
  • PHP v7.0
  • WordPress v5.9.0
  • Elementor v3.12.0
  • ECMA v6 (JavaScript)
  • WebGL 1.0 / 2.0
  • Android 7 / iPhone 6s / iPad 5th Gen.

Installation

PausAR, as with most plugins, can be installed directly via the plugin directory in the WordPress environment, or manually by importing the plugin as a zip file. Different versions of PausAR are offered. On WordPress itself, only the free version with all basic functions is available, while www.pausarstudio.de offers the free and a paid version with full functionality.

Activation and Licensing

Depending on the version of PausAR installed, further steps may be necessary after activation. All versions that are downloaded directly from www.pausarstudio.de carry out the necessary settings and queries after the first activation. This includes optional consent to collect user data or requesting a license key for the premium version of the plugin. If no valid license key is provided, the plugin will only be activated with the basic functions.

PausAR Viewer activation
Opt-In after activation of PausAR
PausAR Viewer activation
License activation (premium version)

If an active license expires, the plugin automatically switches to the free version. All AR content created remains saved, even if certain functions are temporarily deactivated or are no longer visible. As soon as a premium license is activated again, the plugin reactivates all corresponding functions and the previously saved settings become visible again.

Server configurations (Pro users)

Some versions of PausAR require further adjustments to the server after installation. These only have to be done once, even if the plugin get removed and installed again. The necessary steps differ depending on the server software used. The generally necessary changes and possible conversions for the most popular servers are described in this documentation. However, you should also find out more from your individual server provider.

The required changes include adding new file formats (MIME types) to the server, as some of the file formats required by PausAR are blocked by most servers by default. Special formats used by Apple devices (iPhone, iPad, Vsion Pro) to display 3D and AR content are not among the globally known MIME types and must therefore be added manually.

The following MIME types should be added:

The goal of PausAR is to enable the creation of web-based AR content without requiring much programming knowledge. Unfortunately, after installing and activating PausAR, in some cases configurations on the web server are necessary, which may require basic knowledge of web servers. In most cases, these configurations are not necessary for the free version of PausAR and only need to be done once, even if the plugin is removed or reinstalled.

The most important steps are shown in this documentation using the two popular web servers Apache and Nginx as examples. Necessary steps for web servers from other providers should be similar, although in this case the official documentation of the respective server should be consulted.

The configuration involves adding new file formats (MIME types) to the web server in order to prevent certain files (.reality) from being blocked. Apple devices (iPhone, iPad, Vision Pro) use their own file formats (usdz & reality) to display 3D models and AR content, which most servers do not support by default.

When using the Pro version of PausAR Viewer you have access to upload .reality files for more complex AR scenes on apple devices (e.g. AR scenes with sound made in reality composer). The reality file format needs to be added to your servers MIME type configuration. (Otherwise apple user will see an error when trying to start the AR scene “The model requires a newer version of iOS”). In addition we also recommend to include the usdz MIME type. Although till today usdz does not require this.

The following MIME types should be added:

Extension Kind of document MIME Type
.usdz 3D scenes and models model/vnd.usdz+zip
.reality 3D scenes and models model/vnd.reality

MIME types can be unblocked by adding them to the list of known file formats. This is usually done by adding commands to the server’s designated configuration files.

Apache

For Apache, the following lines must be added to the ‘/.htaccess’ file. The file can usually be found in the root folder of the web server. Since a large part of the entire server configuration is contained in this file, caution is advised.

				
					AddType model/vnd.usdz+zip .usdz
AddType model/vnd.reality .reality
				
			

Nginx

For Nginx, the following lines need to be added to the ‘/mime.types‘ file. In some cases this file is missing from the server directory and has to be created manually. More detailed instructions can be found here.

				
					types {
    model/vnd.usdz+zip usdz
    model/vnd.reality reality
}
				
			

To bring AR content to an Elementor website, you should first understand the basic structure and functionality of the plugin. PausAR does not use global settings for creating AR scenes, but rather uses simple Elementor widgets that work like a kind of template. Each instance of a PausAR widet creates different HTML content on the website and each represents its own, independent AR scene.

 

The PausAR widget, like all Elementor widgets, has a menu for configuring and designing the content, as well as a live preview of the HTML elements on the website itself. On the website there is a button for each widget instance that goes to starting the AR scene is used, and an optional preview area for images or interactive 3D models is also created. The 3D preview shows the AR scene in 3D and therefore also shows the content for users without AR-capable devices.

PausAR Web AR elementor config

Widget-Menu

Preview (2D or 3D)

Start button

Widget settings

Each AR scene is configured via the widget menu, which appears when you select the respective widget instance. The menu is divided into three main categories to separate content adjustments, visual adjustments (css) and other settings. The actual settings are also divided into subcategories in order to separate settings for the button, the AR scene and the preview from each other.

Every change is immediately displayed live in the website preview of the Elementor editor. Many functions can already be tested here, such as the interactions of the 3D preview. However, not all functions can be used in the editor and can only be tested in the final website. This includes, for example, starting the AR scene. The button that is generated for each AR scene has no function in the editor.

PausAR enables the construction of web-based AR without any programming knowledge. A simple AR scene with basic functions can be created in just a few seconds. The following chapter shows how to create a simple AR scene and presents all the files and steps required.

Create a Web AR scene in just 60 seconds.

Getting Started: Creating a Scene

To create a new PausAR scene, a new instance of the PausAR Viewer widget is required. Selecting or dragging the widget creates a new AR scene on the website, which initially only consists of a simple button. As long as no 3D content is added, the button does not offer any real function and it is even hidden on mobile devices.

All settings relating to the AR content, the appearance or the behavior of the widget can be made directly in the widget menu of the Elementor editor. The options are summarized in suitable categories. The appearance and label of the button can be adjusted in the basic settings, for example.

PausAR Viewer scene creation
Simple creation of a AR scene

Creating/adding 3D content

Every AR scene requires a 3D model to display. This is probably the most important item on the menu. The “AR Scene” category is located in the content tab. The 3D models, UI elements and links (call to action) and the behavior of the models within the scene can be specified here. Headings can be added or the scalability of the models can be switched on or off, which is particularly important for virtual product presentations.

Each AR scene is always represented by a single file, which must contain all 3D models, animations and, in some cases, interactions. Each file can contain multiple models and there is no direct limitation on the number of 3D models or the size of the scenes.

PausAR Scene menu

For Android/Other

Android and various other devices/systems use the open GLTF standard for displaying 3D content on the web. A GLTF file (.glb) can store 3D models and animations and can be exported by most 3D programs such as Blender. A GLTF file can be added via the corresponding input field and is then used for both the AR scene and the optional 3D preview in the browser. Animations within the file start automatically in AR, but can be activated/deactivated for the 3D preview.

VersionUsable file formats
Free*.glb
Pro*.glb

In addition, the in-house file format “.pausar” can also be used to alternatively display interactive AR scenes on Android devices. In order to create such files, access to our Pausarstudio web app is required.

For Apple (iOS, iPad, Vision Pro)

Apple devices all use the USD (.usdz) or Reality (.reality) format to display AR content. Both formats store 3D models, animations and even interactions and events between models. Both formats should be created using Apple’s own software, such as Reality Converter or Reality Composer. Free software such as Blender or external converters can create USD files, but they do not contain any interactions and usually cannot be displayed correctly on Apple devices. It is therefore advisable to first create a 3D scene for Android (GLTF) and then convert it into a USD scene using Apple’s software.

USD or reality files cannot be used for PausAR’s preview feature, but offer the possibility of implementing interactions with click events between models and triggering targeted animations.

The paid version of PausAR also allows the use of more modern reality (.reality) files, which enable more complex AR scenes and can store more interactions.

VersionUsable file formats
Free*.usdz
Pro*.usdz, *.reality

Conclusion

By creating a scene, adding a 3D model and configuring the UI and behavior of the scene, we have created a good base. The AR scene could now be used and enhance your website with interactive AR and 3D scenes. And all of this in just a few steps.

In addition to the basic settings and the most important functions in the content menu, there are other optional settings and adjustments that can further enhance any PausAR scene. Some optional effects or settings are listed here are briefly described with examples.

This chapter is currently being revised. New content coming soon…

Display in an iframe

To include 3D & Web AR content on any website regardless of the CMS we included an easy to use iframe solution which teleports your 3D & AR scenes from your AR WordPress Website with Elementor (can be a subdomain for example) to any other website you like. 

Iframe mode also allows product variantions
 with PausAR Viewer content in WooCommerce. To do this, you first need to create a page with only PausAR Viewer and your required 3D / AR model (best practice is to use “elementor canvas” layout for this page). When everything is set, turn on the Iframe mode in the advanced settings of PausAR Viewer widget and fill in the target URL (URL of your woocommerce product where the iframe will be integrated ending the URL with the “?attribute=” slug for your products variant). After that create a template in Elementor containing the HTML code below (with your source link of course) and integrate the created template with a shortcode into the variant description. If you only have elementor free you can create a template shortcode with the free plugin “anywhere elementor” which you can download in the plugin marketplace.

				
					

<iframe height="600px" src="https://www.pausarstudio.de/iframe-example" id="exampleID">
</iframe>
				
			

AR scenes properties

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Swivel effekt (Preview)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Scroll effekt (Preview)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Devices that can show 3D content

3D mode in the webbrowser is supported by almost every common device and webbrowser regardless of operating system and hardware e.g. mac, windows, android, iOS, iPadOS, VisionOS.

Possible limitations:

Your browser must allow javascript. This is the common standard. If you have deliberately deactivated javascript, please just re-activate it.

Devices that can show AR content with PausAR viewer

The AR mode requires at least an iPhone 6s, iPad 5th generation (from iOS 12) or an Android smartphone or tablet with at least Android 7.0. It also works on the Apple Vision Pro (from VisionOS 1.0). However, older Apple devices may crash if the AR scene exceeds a certain limit (see below).

Technical background: AR mode needs ARKit (Apple) or ARCore (Google Android) integrated in the operating system of the device.

Possible limitations:

Large AR scenes may face performance problems on older iPhones or iPads. For more complex AR scenes, we therefore recommend at least iPhone 11 or iPad 7 (released 2019). 

3D preview models not loading or start AR button not working

Problems when using cache Plugins

Problems when using the plugin WP-Optimize and the following features:

  • JavaScript minification: JavaScript code will be compressed to shorten loading times. This makes PausAR’s code unusable. If you want to use WP-Optimize with PausAR, you must add the PausAR plugin file path as an exception within the WP-Optimize settings.

    To do this, add the following file paths:

    • /wp-content/plugins/pausar-3d-ar-for-elementor
    • /wp-content/plugins/pausar-3d-ar-for-elementor-premium
  • JavaScript processing (since version 3.7.0): This feature causes ES6 modules to no longer load correctly, which makes many modern plugins unusable, including PausAR. It is recommended to disable this feature, otherwise the 3D preview and AR mode will not work.

Problems when using the plugin LiteSpeed Cache:

  • If the plugin LiteSpeed Cache is used with the activated “UCSS” function, visual problems may occur. The CSS classes of the plugin can then only be partially loaded.

  • Possible conflict with fullscreen mode on iPhones when using a higher preset than advanced.

Conflicts with other 3D viewers

Conflicts may arise when using Google’s Model-Viewer on the same website page. If PausAR is used, further imports of the Model-Viewer should be avoided and are not needed even for custom coding.

AR view not working

3D models not loading in AR mode

3D models cannot be loaded in AR mode if the paths are not specified with the global path. This only affects models whose files were not inserted directly via the WordPress media library.

"Object could not be loaded" displayed when AR is started

This is probably due to the fact that your GLB file is integrated with http instead of https. A spelling mistake in the file path or swapping “http://” and “https://” in the path could be the cause. Please use “https://” in the file path even when using the CustomURL function in the media library. Otherwise Scene-Viewer will not work properly on android devices!

"The model requires a newer version of iOS" is displayed when AR is started

This is probably due to the fact that you are using a .reality file and have not specified this file type in your mime type declaration. Please refer to “Installation & Configuration” and add the mime types to your server configuration.

AR view crashes (whitescreen or blackscreen in darkmode)

This may happen for two reasons:
1. Your Apple device is too old – we recommend at least an iPhone 11 or an iPad 7 for the best performance.
2. Your USDZ / reality file is too complex. For an optimal Web AR experience, your AR Scene should not exceed 25MB. (In any case, the loading time of large 3D models should be taken into account in the area of web AR). In addition, long animations or interaction options increase the utilization of the scene on the end device.