How to embedd Kroscloud 3D scene in your own page

Easy embedding is the Kroscloud core feature that allows you to include your Kroscloud 3D content directly into your website. There are two basic ways how do it. Using a link with a back URL or with an IFrame tag – in a similar way as with Youtube video for example.

The Link with a back URL

The simplest way how to embedd your Kroscloud 3D content into your own website is using a link. You can specify a custom back URL for such a link, so when a user follows the link, he or she will be redirected to the kroscloud fullscreen viewer, but the viewer back button will lead the user back to your webpage – to the URL you specified earlier. This way you can create seamless user experience with just a simple link.

Quick how to:

Open the editor of the scene you want to embedd
Click on the Share menu
At the Share menu, open Fullscreen tab
At the Back URL section, click on „Add new“ and fill in the back URL where you want a user to be redirected when he or she leaves the 3D viewer. This will be the URL of your web page from where the user displays your 3D scene. Lets say for example https://www.mywebpage.com/cool3d
Click Save
Now, under the link preview in the top of the Share menu, click on the „Copy to clipboard“ button.
You have the link now, so you can embedd it to your website – as a simple link text, image link etc. You only need to open your website CMS and create the link here.

This way, you will have a direct link to your 3D scene at Kroscloud with back URL (viewer exit button) leading to your website. There is no other way how to leave the Kroscloud viewer than using the exit button, so you can be sure your visitor will return to your website.

This is the easiest and fastest way how to embedd your Kroscloud content to your website. If you need to embedd Kroscloud 3D viewer directly into your web page, as a seamless part of the page layout, take a look at the IFrame:

Direct embedding using an IFrame tag

The more advanced way of how to embedd Kroscloud 3D scene into your website is a direct embedding with an IFrame tag. In a similar way as when you embedding for example Youtube video. This way there is no redirect, 3D viewer is a part of your website and you have a full control over it’s appearence. You can get the IFrame tag with all the required parameters in the Kroscloud editor, under the Share menu.

Quick how to:

Open the editor of the scene you want to embedd
Click on the Share menu
At the Share menu, open IFrame tab
It is important to set Back URL. Though the 3D viewer is a part of your webpage, if the user with an iOS device uses the fullscreen function, he or she will be redirected to fullscreen viewer at kroscloud.com – because iOS OS unfortunetely does not support the fullscreen mode. So you need to properly setup the exit button URL. In most case it will be the URL of your page containing the IFrame viewer.
There are other options next to Back URL on the Share menu, but for the basic usage, just click on „Copy to clipboard“
Now you have the IFrame tag in your clipboard and you just need to paste it in your website source code. In the very same way as you do with Youtube videos for example.

Customizing Look&Feel of the embedded Kroscloud 3D viewer

For both options you can customize the 3D viewer look&feel by customizing its apperance. Change its colors, localize it for non-english websites or replace Kroscloud logo with your own brand to create truly seamless experience for your visitors. Learn more about it at https://www.kroscloud.com/Manage/UICustomization