Frequently Asked Questions on Verge3D — Soft8Soft
Description: Below are answered some common questions with regard to using Verge3D and 3D web technology.

# Frequently Asked Questions

Below we answer some common questions about Verge3D and related topics.

- Licensing and Support
  - I purchased Verge3D. How do I download the watermark-free version?
  - On how many computers can Verge3D be installed? How many users can use a single license?
  - What are the limitations / restrictions of the Verge3D Trial? Can I do ... ?
  - How do I obtain technical support?
  - Is Verge3D secure? Is it compliant with EU security standards?
- General Questions
  - What is WebGL?
  - What is the difference between WebGL and WebGPU?
  - What is client-side, server-side?
  - Where can I find the roadmap for Verge3D development?
  - Do I need Internet connection to work with Verge3D?
  - My app does not load when I open it in Chrome - yet it works when running from the App Manager...
  - Cannot load app when I launch it by clicking on the .html file.
  - Can I export my scene to a standalone all-in HTML file?
  - Do Verge3D apps work in Internet Explorer 11?
  - Is it possible to run the App Manager without Blender, 3ds Max, or Maya?
  - How can I copy Puzzles into another project?
  - Sound is not played on mobile devices...
  - My app is laggy and slow. How do I increase its performance?
  - On what devices should I test my app before making it available online?
  - How to open the browser console?
  - App works fine in the App Manager but fails when uploaded to a remote server (such as Verge3D Network)
  - How to rename my application properly?
- Modelling and Content Creation
  - What is glTF?
  - In what cases should I use glTF-compatible materials?
  - Which 3D format is better glTF or GLB?
  - When I export my scene to Verge3D I see nothing (or just the background).
  - What 3D formats can be used with Verge3D?
  - Is Maya LT or Maya Creative supported?
  - Any plans to support Maxon Cinema 4D? Sketchup?
  - How do I convert my SolidWorks model to WebGL using your software?
  - How to create realtime browser visualization based on a Revit model?
- E-Commerce
  - What would be the most straightforward way to create 3D configurators with Verge3D, considering I have very limited skills in web development?
  - My budget is limited, but I still want to create a 3D-enabled web store. How do I proceed?
  - I need to create a basic CPQ (configure price quote) system with customizable products shown in 3D.
  - I can afford quite a budget, but I'm not too much a techie person myself. How do I create a 3D website efficiently?
  - I developed a cool Verge3D plugin. How do I sell it?
- Programming with Puzzles
  - Which puzzles should I learn first?
  - How to password-protect my app?
  - How to make custom first-person controls on mobile devices?
  - Why hide/show puzzles do not work for annotations?
  - Is it possible to disable (hide) ray/reticle in VR mode?
  - How to clone objects recursively?
  - Preventing iPhone camera cutout from overlapping the app's UI elements
- Advanced Programming Questions
  - Is Verge3D compatible with Three.js API?
  - How to calculate texture memory usage?
  - My app window grows endlessly on iOS devices. How to fix it?
  - Keyboard controls does not work for the app embedded in iframe.

#

## Licensing and Support

#

### I purchased Verge3D. How do I download the watermark-free version?

After purchase (in minutes or hours depending on your time zone) you will be sent an email with your license key. Copy this key and paste it in the App Manager's Licensing Manager dialog. This will make your Verge3D trial bundle a licensed copy and will remove the watermark from your projects.

In addition, if you purchased the Enterprise version, you can download the special DevKit distribution containing the source code of Verge3D. To get it, go to your dashboard at soft8soft.com and click Downloads button. The same applies to all material packs purchased from Soft8Soft.

#

### On how many computers can Verge3D be installed? How many users can use a single license?

The license is assigned on the per person (Freelance) or per entity (Team, Enterprise) basis. The number of installations is not limited. In case of the Freelance option, only one individual can use Verge3D. On the other hand, there can be up to 5 developers who can use Verge3D within a company or organization.

#

### What are the limitations / restrictions of the Verge3D Trial? Can I do ... ?

The trial version is intended for evaluation purposes only. You must not use in production environments, either for commercial or non-commercial purposes.

So, you can practice you skills with the trial version. You can create a mock-up presentation for your managers. You cannot use it for education - reach us to request a special Educational license at reduced price. And you cannot build up your portfolio with the trial as this qualifies as production use - be sure to purchase the Verge3D Freelance license for that.

See this page for more info about benefits and limitations of the Verge3D Trial version.

#

### How do I obtain technical support?

We offer technical support services as part of the Verge3D Enterprise packages. If you own a Verge3D Freelance or Team license, or still evaluating Verge3D, you might seek for help on the forums.

#

### Is Verge3D secure? Is it compliant with EU security standards?

First of all, Verge3D is a development tool that creates self-hosted web applications. It's up to you to deploy them on your own infrastructure / web server. The source code of Verge3D is provided with the Enterprise or Ultimate licenses, and as such can be thoroughly reviewed by your security team.

As of Verge3D Network, our one-click publishing solution, it is based on Amazon Web Services (AWS). Uploaded applications reside on servers located in the EU region. AWS meets a variety of global and European industry compliance standards such as SOC 1-3, ISO 27001, ISO 27017, ISO 27018, HIPAA, PCI DSS, etc. See here for more info.

#

## General Questions

#

### What is WebGL?

WebGL (Web Graphics Library) is a technology for rendering interactive 3D graphics within the browser. WebGL works right on a website (whether it is accessed from a desktop or smartphone) without installing additional software. However, this is a geeky tech and it would require a lot of time and expertise even to just render a rotating cube. By hiding all this complicated stuff, Verge3D allows a non-coder — an artist, an engineer, or an educator to create rich web-based interactives with ease.

#

### What is the difference between WebGL and WebGPU?

Both technologies are created for the same purpose — to render interactive 3D graphics on the web. The difference is that WebGL is well-established and supported almost everywhere, while WebGPU is considered experimental and has not gained widespread ecosystem support yet.

WebGPU is designed to become a low-level and more performant alternative to WebGL. However, for typical 3D web use-cases it does not really offer any significant advantages over WebGL. Verge3D uses WebGL under the hood, but we keep an eye on WebGPU development as well.

#

### What is client-side, server-side?

In the context of web development, client-side means that something happens in the browser running on the user's device. Server-side means that something happens on the web server.

If we say that Verge3D is a client-side solution, that means that your 3D app works in the browser and there is no server-side programming or additional frameworks required to get your app up and running. This is a key feature of Verge3D that makes it so easy to use. However, since we're talking about web development, the existence of some basic server functionality is implied. In most cases, this functionality is limited to serving application files to the browser.

To make your live easier, we don't require you to have any knowledge about server-side stuff at all. That's why we implemented 3 server-side solutions in Verge3D:

1. App Manager provides a server that allows you to launch applications and use the Sneak Peek feature on your local PC.
2. Verge3D Network is a cloud-based server that can be used to distribute apps to your users with just a single click.
3. Verge3D for WordPress is a plugin used to host Verge3D applications on WordPress, the most popular and easy-to-use content management system.

Of course, you are not limited to use these three! You can always power up your own web server, such as Apache, Nginx, IIS, or use some third-party hosting platform, such as Amazon AWS, Digital Ocean, or GoDaddy.

#

### Where can I find the roadmap for Verge3D development?

Verge3D is a client-oriented product so we move in the direction our customers want us to. In general, our priorities are e-commerce, e-learning, and AR/VR applications. If you have a specific feature in mind that you'd like to see in Verge3D, we can add it on a contract basis. Feel free to reach us to discuss details.

#

### Do I need Internet connection to work with Verge3D?

Verge3D toolkit is installed on your local computer and does not require internet connection to operate. The only feature that requires Internet connection is publishing finished apps on Verge3D Network.

Also, to help users with unstable or low-band internet connection, we ship offline versions of Verge3D User Manual and Developer Reference. Find these in the docs directory of your Verge3D distribution.

#

### My app does not load when I open it in Chrome - yet it works when running from the App Manager...

Due to security policy imposed by browser vendors, web applications cannot access data loaded from another domain, including from a local file system. Therefore, you should use the App Manager (which comes with a local server) for development, or publish your Verge3D apps on a web server (or upload to the Verge3D Network) to be able to run it.

If you need a desktop or mobile application instead, you can convert your Verge3D apps to those platforms using the App Manager. See the following guides on how to create desktop or mobile apps with Verge3D.

#

### Cannot load app when I launch it by clicking on the .html file.

See the answer on the question above.

#

### Can I export my scene to a standalone all-in HTML file?

Yes, however it will be much more efficient to convert your app to a full-featured desktop app via Electron.

#

### Do Verge3D apps work in Internet Explorer 11?

Yes, older versions of Verge3D (prior to 4.0) come with the IE 11 compatibility module:

Check out the download archive to get the corresponding link.

#

### Is it possible to run the App Manager without Blender, 3ds Max, or Maya?

Sure, you can run the App Manager in standalone mode. Simply click on the corresponding Verge3D icon from the desktop or start menu. This launcher will also open your default browser and automatically navigate to the App Manager.

#

### How can I copy Puzzles into another project?

You can use the Library feature for that.

#

### Sound is not played on mobile devices...

See how to fix that here.

#

### My app is laggy and slow. How do I increase its performance?

Check out the Performance Bottlenecks and Optimizing WebGL Performance guides.

#

### On what devices should I test my app before making it available online?

If your app works good enough on the development system, test it on iPhone. It is not necessary to use the latest model, since Verge3D works quite well on older Apple devices as well. Make sure to test your app in both portrait and landscape modes to see how your content looks in each screen orientation.

Why iPhone? First, due to its popularity among non-technical users. Second, it uses the Safari browser, which handles WebGL quite differently compared to Chrome (or Chrome-based browsers like Edge).

#

### How to open the browser console?

Google Chrome

  Menu → More Tools → Developer Tools or

  F12 key on Windows/Linux or Option + ⌘ + J shortcut on macOS.

  In the Developer Tools window, select the Console tab.

Mozilla Firefox

  Menu → More Tools → Browser Console or

  F12 key on Windows/Linux or Shift + ⌘ + J shortcut on macOS.

Apple Safari

  Activate Developer Menu in the preferences (Advanced Tab) then Develop → Show JavaScript Console or

  Option + ⌘ + C shortcut.

Microsoft Edge

  Menu → F12 Developer Tools or

  F12 key.

  In the Developer Tools window, select the Console tab.

Google Chrome on Android
  It's not possible to display the browser console right on the Android device. Use the USB debugging feature instead.
Apple Safari on iOS/iPadOS
  It's not possible to open the browser console right on the iOS/iPadOS device. You will require a Mac system and the Web Inspector tool to access console content.
Microsoft Internet Explorer
  Deprecated, not supported in Verge3D anymore.

#

### App works fine in the App Manager but fails when uploaded to a remote server (such as Verge3D Network)

Possible reasons for that:

1. Your development system is case insensitive, while the remote system is case sensitive.
2. You incorrectly specified the absolute path to the HTML or glTF file.

Example for the first case: if you're using Windows or macOS (both use case insensitive file systems), you can accidentally rename your files when exporting. But since the most Linux servers (including Verge3D Network) use case sensitive file systems, this may cause the issue when the file uploaded to the server.

For example, you created the "MyConfigurator" app. By default, this app will include the following asset files in it:

`MyConfigurator.blend (or MyConfigurator.max or MyConfigurator.mb) MyConfigurator.html MyConfigurator.js MyConfigurator.css MyConfigurator.gltf MyConfigurator.bin`

Say you open your scene file in the modelling tool (on Windows or macOS) and export it as `myconfigurator.gltf`.

This way your app folder will look as follows (check the case of the two bottom lines):

`MyConfigurator.blend (or MyConfigurator.max or MyConfigurator.mb) MyConfigurator.html MyConfigurator.js MyConfigurator.css myconfigurator.gltf myconfigurator.bin`

If you open the main JavaScript file of your app (MyConfigurator.js in our example), you can see that it tries to load `MyConfigurator.gltf`, not `myconfigurator.gltf`. This is perfectly fine on Windows/macOS, since these two names represent the same file! However, when you upload your app to the server, it will fail to load.

As such, always save and export your files with proper case. Alternatively, you can rename your file in the main JS file.

In the second situation, you might incorrectly specified an absolute path to the loaded resource in your JavaScript file, such as:

`/applications/my_awesome_app/my_awesome_app.gltf`

or

`http://localhost:8668/applications/my_awesome_app/my_awesome_app.gltf`

In such case, specify relative path to fix the issue:

`my_awesome_app.gltf`

or

`./my_awesome_app.gltf`

#

### How to rename my application properly?

Go to the applications folder, find and rename folder which contains your app (e.g my_awesome_app to cool_3d_visualization).

Do not confuse app folder name with the title displayed in the App Manager. For example, "my_awesome_app" app gets the "My Awesome App" title. This title is generated automatically by replacing underscore characters with spaces and placing initial characters of the words to upper case.

If you also want to rename the files inside your app, do the following:

1. Go to the app folder.
2. Assign new names to all html/css/js/gltf/bin/blend/max/ma/mb assets (see more here). Do not touch v3d.js, visual_logic.xml, and visual_logic.js scripts!
3. Open and reexport your scene(s) to update the paths inside the exported glTF assets.
4. Open the main HTML file (e.g my_awesome_app.html) and update the following JS/CSS paths: `<script src="my_awesome_app.js"></script> <link rel="stylesheet" type="text/css" href="my_awesome_app.css">` Say you want to rename my_awesome_app to cool_3d_visualization. In this case, the paths become: `<script src="cool_3d_visualization.js"></script> <link rel="stylesheet" type="text/css" href="cool_3d_visualization.css">`
5. Open the main JavaScript file (e.g my_awesome_app.js) and update the following line with the preferred application name: `sceneURL: params.load || 'my_awesome_app.gltf',` Say you want to rename my_awesome_app to cool_3d_visualization. In this case, the sceneURL line becomes: `sceneURL: params.load || 'cool_3d_visualization.gltf',`
6. Launch the app in the App Manager. If the app does not work, open the browser console to check for possible errors.

Also, feel free to update the HTML metadata in the renamed app. See here for more info on how to do that.

#

## Modelling and Content Creation

#

### What is glTF?

glTF is a universal web-friendly file format which is used to store and interchange 3D graphics data in Verge3D and other 3D software. It can store not just models but entire scenes, including geometry data (meshes), object positions, animations, camera data, lights, materials, textures and other info.

The glTF format specifies only a basic set of features. Thus, we extended this format with several extensions (prefixed S8S). Verge3D's subset of glTF supports not only the basic PBR materials, but also Blender, 3ds Max, or Maya node-based materials, cameras, lights, environment and other things, making your asset workflow easier and more efficient.

In Verge3D we use the 2.0 version of the glTF format. The older 1.0 version is not supported.

#

### In what cases should I use glTF-compatible materials?

There are some cases when you might prefer using simple glTF-compatible PBR materials over Blender, 3ds Max, or Maya node-based system:

- You can export them into glTF 2.0 format with the export to gltf puzzle and preview/load in a great variety of model viewers.
- You can export them into USDZ with the export to usdz puzzle and preview on Apple devices in AR mode.

The main drawback of using glTF-compliant materials is that you can't use the native material system provided by the modelling suite. As such, it might be difficult to achieve the same level of quality for your renderings.

Check out the following guides for more info:

- Creating glTF-compatible materials in Blender
- Creating glTF-compatible materials in 3ds Max
- Creating glTF-compatible materials in Maya

#

### Which 3D format is better glTF or GLB?

These are the two variations of the same glTF 2.0 format. glTF container is more popular and more efficient since it stores only metadata (parameters of your scenes/objects/materials etc). All external data, such as geometry, animation and textures are stored separately (in *.bin, *.jpeg, *.png files).

The GLB container stores all data in the binary form and packs metadata, geometry, animation and textures into one big file. As such, GLB can be is more convenient since you don't need to deal with a bunch of files.

#

### When I export my scene to Verge3D I see nothing (or just the background).

This may happen due to various reasons:

- You camera is not configured properly. Check out its near and far clipping distances as well as the target point (if your camera has the Orbit controls type).
- This could be backface culling or normals pointing in wrong direction. Check your materials and normals.
- Sometimes it can be an issue with your hardware or a software bug preventing geometry to be rendered. Check out the browser console and see if there any errors reported.

#

### What 3D formats can be used with Verge3D?

In theory, by using third-party importers, Verge3D is able to load various 3D formats. Still, the preferred way to create 3D web content is to use the glTF 2.0 format augmented by Soft8Soft extensions. This format is supported by Blender, 3ds Max, or Maya exporters which come with Verge3D.

Also, the script of the Standard application template is based on the App class which supports loading glTF files only.

#

### Is Maya LT or Maya Creative supported?

Unfortunately, no. Maya LT does not support Python scripting for some reason and as such exporting from it is not possible.

Same thing with Maya Creative, as it does not allow loading any third-party plugins.

#

### Any plans to support Maxon Cinema 4D? Sketchup?

See the answer to this question on the forums.

#

### How do I convert my SolidWorks model to WebGL using your software?

As of 2016 version, 3ds Max supports SolidWorks assets natively. Simply import your SolidWorks file into 3ds Max and then export to WebGL as any other Max scene.

Note: Pay attention to geometry optimization since CAD models tend to be quite heavy for the web. Tweak Mesh Resolution setting from the Import Settings dialog when importing your files. You can also use 3ds Max modifiers to reduce the number of polygons on your models.

#

### How to create realtime browser visualization based on a Revit model?

You have two options:

1. Export your Revit model to FBX format and then import to 3ds Max, Maya, or Blender.
2. Use Revit importer which supported natively in 3ds Max. Don't forget to activate Autodesk Revit Interoperability option during Max installation to enable this feature.

In any case keep your geometry optimized. We recommend using 100K-500K polygons for the entire scene.

#

## E-Commerce

#

### What would be the most straightforward way to create 3D configurators with Verge3D, considering I have very limited skills in web development?

If so, we'd recommend taking one of the demos shipped with Verge3D as a reference, then modifying it for your needs. The following 3 demos in our Asset Store were made by 3D artists alone, without a single line of code written:

Ring
  The easiest, UI is based on camera-parented objects.
Recliner
  Comes with more advanced HTML-based layout and shopping cart made with Webflow editor.
Scooter
  Most advanced, 1000000+ combinations. Similarly to Recliner, UI was made with Webflow editor.

Also, if you manage to use WordPress CMS, pay attention to WooCommerce Composite Products extension which can help you to build Verge3D-friendly 3D web configurators with ease.

#

### My budget is limited, but I still want to create a 3D-enabled web store. How do I proceed?

At first, you create 3D visualizations for your products. Then you have 3 options:

- PayPal. You can add PayPal payments to your app with the paypal create order puzzle, then upload to Verge3D Network or some other hosting. This option would be the easiest.
- WooCoommerce, an e-commerce platform used by millions online shops. This option is free and runs on top of WordPress. Use Verge3D plugin for WordPress to upload 3D content, then setup it to work with WooCommerce.
- Custom e-commerce website provided by Verge3D plugin for WordPress. The orders are processed by using the place order or place order + puzzles. Similarly to WooCommerce option, it requires a web server or hosting platform running WordPress.

#

### I need to create a basic CPQ (configure price quote) system with customizable products shown in 3D.

We'd recommend the following approach:

- The 3D part can be designed as regular Verge3D application. Configuration engine is implemented with Puzzles (see any Verge3D configurator demo). If you have many models to load them at once, you should split your content to multiple assets and use the append scene puzzle to load the models on demand.
- The prices can be calculated with Puzzles (client-side, which is not secure) or better handled on the server if security is a concern. If you choose the server approach, add all product parts and their corresponding prices in the admin interface of the Verge3D for WordPress plugin, then use the place order + puzzle in your app to generate orders.
- Verge3D plugin for WordPress comes with customizable document generator which can be used to create both quotes and invoices. These documents can be downloaded by the sales manager or emailed to the customers, either manually or automatically.

#

### I can afford quite a budget, but I'm not too much a techie person myself. How do I create a 3D website efficiently?

We suggest that you reach our long-term partners, digital agencies or freelancers, who are very experienced in developing applications of such kind.

Also a good idea would be creating a topic on the Jobs and Opportunities forum.

#

### I developed a cool Verge3D plugin. How do I sell it?

Excellent job! Now you can choose one of the following selling platforms:

- Gumroad or similar services (Shopify, SendOwl, Sellfy). These are easy to use but have somewhat higher service fees.
- WooCoommerce. Requires WordPress web server or hosting solution.
- Verge3D for WordPress. This solution supports downloadable products and PayPal payments. With this option you can demonstrate how your plugin works right on the product page.

#

## Programming with Puzzles

#

### Which puzzles should I learn first?

The list is really short!

- when clicked — to perform various tasks when user clicks on something.
- hide/show — to hide/show objects making your scene customizable.
- assign material — to create basic configurators.
- play animation — to animate your objects (or materials).

For usage example, check out the Simple Configurator demo (source files available in the Asset Store).

#

### How to password-protect my app?

In cases when e.g. you don't want your app to be seen before the final release, you can use the following puzzles to protect it with password:

Change "123456" to something more secure.

This method is not 100% robust and can be hacked. For more secure way of restricting access to your app, use HTTP authentication or implement server authorization.

#

### How to make custom first-person controls on mobile devices?

Basically, you need to make additional screen-aligned elements which will be your FPS character controls. Minimum set of such elements would be forward-backward (since rotation is performed by touching/dragging the screen).

In general, you have two ways to render FPS controls on a mobile device:

1. By using HTML elements positioned above the rendered 3D scene. See more about this technique here.
2. By using planes or similar 3D objects parented to the camera. For that, you just need to parent and align these in the modelling suit.

Once you have your screen controls created, use the change local transform to move your camera. For example, to move forward/backward you can use the following logic:

To implement character strafing use the same puzzle but move along X axis instead of Z.

#

### Why hide/show puzzles do not work for annotations?

Since Verge3D moves and controls visibility of the annotation objects itself, hide/show puzzles won't work.

Instead, you should use the display CSS property for the annotation element referenced by its ID. For example, to hide/show annotation with the element ID poi1, you can use the following two puzzles:

Basically, setting display to none hides an annotation, while setting display back to block shows it.

#

### Is it possible to disable (hide) ray/reticle in VR mode?

Use the get controller property puzzle to get the ray/reticle object and the hide puzzle to make it hidden:

#

### How to clone objects recursively?

The clone object puzzle clones recursively. However, if you need more control on the resulting object names, you might use the following function implemented with JavaScript:

#

### Preventing iPhone camera cutout from overlapping the app's UI elements

When running Verge3D apps in landscape mode, the iPhone camera cutout (aka notch) may cover the app's UI elements. To prevent such undesirable effect, set the following notch-aware CSS padding to the corresponding HTML elements:

`padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);`

With Puzzles this can be implemented as follows (make sure there is no semicolon at the end of the `env...` property definition):

In case the UI elements should have some non-zero padding on other devices (say 10px), use the following code:

`padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));`

#

## Advanced Programming Questions

Read below if you have some JavaScript coding skills.

#

### Is Verge3D compatible with Three.js API?

Verge3D offers limited compatibility with Three.js API, as such existing Three.js code can ported to Verge3D with minimal efforts. However, you don't really need to rely on programming to do things. Properly setting up the scene in the 3D modelling suite as well as using Puzzles can cover the most use cases.

#

### How to calculate texture memory usage?

To store a regular (non-HDR) texture in the GPU memory, you will require at least

`width x height x 4 x 1.333 bytes`

Where width, height are the texture dimensions in pixels, 4 is the number of bytes per pixel, while 1.333 represent additional memory needed for texture mipmapping. For example, a texture of size 2048x2048 will occupy approximately 22.4 Mb of GPU memory. If you need to store an HDR texture, multiply that value by 2.

Also, depending on WebGL implementation, the browsers may store at least one copy of the texture in the conventional (system) memory.

#

### My app window grows endlessly on iOS devices. How to fix it?

If you embed a Verge3D application inside an iframe element, you may run into a specific issue on iOS devices, which causes iframes to constantly increase in size beyond the boundaries of the browser window. This in turn can lead to a WebGL crash.

To deal with this issue you can use the following snippet, which resizes the iframe to the page's body preventing the said iframe from extending beyond it.

`<script> if (/(iPad|iPhone|iPod)/g.test(navigator.userAgent)) { var iframe = document.getElementById('myIframe'); function resize() { iframe.style.width = getComputedStyle(document.body).width; iframe.style.height = getComputedStyle(document.body).height; iframe.setAttribute('scrolling', 'no'); } iframe.addEventListener('resize', function(e) { resize(); }); resize(); } </script>`

#

### Keyboard controls does not work for the app embedded in iframe.

It happens when some other HTML on your page gets the focus. To fix this issue try the following code:

`document.getElementById("my_iframe_id").focus();`

Where my_iframe_id is the ID of your iframe element.

With puzzles, the same code looks like this:

## Got More Questions?

Feel free to ask on the forums!