Embedding an iframe¶

Warning

Online model publishing is only available to PRO subscription plan users.

Overview¶

Embedding a Maverick Excelsior Viewer using an <iframe> is the simplest and most universal method to showcase your interactive 3D models on any website. This approach works with virtually any web platform, content management system, or custom HTML page without requiring special plugins or technical expertise.

Example `<iframe>`¶

This is an embedded Excelsior Viewer <iframe>.

Click around to rotate the interactive 3D model.

Here is the exact piece of HTML code we used:

<iframe
    src="https://maverickexcelsior.com/iframe/?webex=https://editor.maverickexcelsior.com/maverick-excelsior-demo.webex"
    width="640" height="640" frameborder="0" style="border: none;">
</iframe>

Why use iframes?¶

Universal compatibility: They work on any website that supports HTML.
No installation required: No plugins, libraries, or dependencies needed.
Isolated environment: The viewer runs independently without affecting your site's code.
Easy to implement: Just copy and paste a few lines of HTML.

Basic implementation¶

To embed a Maverick Excelsior Viewer on your website:

Host your .webex file on a publicly accessible server.
Create your src URL concatenating the public URL of our .webex file like this:
```
https://maverickexcelsior.com/iframe/?webex=YOUR_WEBEX_FILE_URL
```

Add the iframe to your HTML:

<iframe
    src="https://maverickexcelsior.com/iframe/?webex=YOUR_WEBEX_FILE_URL"
    width="640" height="640" frameborder="0" style="border: none;">
</iframe>

Styling¶

An <iframe> is essentially a black-box element that you can embed within existing HTML. You can't explicitly modify the look&feel of its contents, but it behaves like any other standard HTML element in the sense that you can style it externally or wrap it in a <div> for sizing and positioning.

Tip

For more control, branding customization, API messaging, etc... Please go with a JavaScript implementation instead of an <iframe> as explained in the rest of the viewer documentation area.

Troubleshooting¶

Viewer not loading: Verify your .webex file URL is publicly accessible and correctly concatenated after <iframe src=....
Display issues: Ensure that the dimensions of your <iframe> fit well within your layout, especially with regard to responsive design.