Interactive cards allow you to show additional information that will appear when the user clicks on a hotspot. Cards can be composed of video, text, links and even other virtual tours.
You can explore this sample tour to see a lot of different examples of interactive cards.
Editing Interactive Cards
To create or edit a card, choose the Open card option from the Action dropdown in the hotspot editor and click on the Edit card button that appears.
The card editor has four fields:
- Mediainsert an image or embed code (ex video file or map) in the card. See below for supported media types.
- Textinsert text into the card, the text can be as long as you need it to be and it if overflow, a scrollbar will appear.
- Link labelif you want to add a link to the card, you can add the label for the link here.
- Link URLthe URL of the link. If you do not add a label, the URL will be displayed instead.
All of the elements in the card are optional. The card can be video only or video with text or text only or any other combination.
Designing Interactive Cards
If you click on the Design tab in the top part of the card editor, you will access a panel with several options to configure the cards look & feel.
All the cards are responsive and will adapt to different screen resolutions, but you can decide what the maximum width of the card should be. You can also set the height of the media element in picels or as aspect ratio (i.e. in proportion to the width). Cards that have a media element and text can use a row or column layout. You can also add rounded corners, set the text padding, font size and text and background colors.
One of the more interesting uses of an interactive card, is the ability to embed another Kuula tour in it. For example, you can create a master panorama or a drone shot, with hotspots the open popup with tours presenting buildings & spaces visible in the master image. It can also be used to add non-360 image galleries to a card as described in this article.
3rd party media
The simplest media type to add is a still image. You can upload and add one, by clicking on the Add image button on the right side of the Media section.
Otherwise, you can an iframe code copies from any website or in simply a URL. Some types content that can be embedded include:
- Videofrom Youtube, Vimeo or another video providers. 360 video also works!
- PDFa link to a PDF file will open in an embedded PDF reader
- Interative contentfrom ex. Google Forms or 4screens
- Media playerfrom Soundcloud or other music services
- Social Media postfrom Twitter, Facebook etc.
- Street view panoramafrom Google Maps
- 3D Spacefrom Matterport
- 3D Objectfrom Sketchfab
- Mapfrom Google Maps, Bing or Open Street Maps.
- Weather widgetsfrom Weather.com and others
- Reservation widgetfrom OpenTable
- Interactive demofrom Codepen
To add an iframe, simply paste the code provided by the service you use. In general, we support embeds from any service available on the web that alows embedding. You can also embed content from your own website, if you create your own embed code. Here's an example of an iframe code from Soundcloud that would work:
<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/328259811&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
Instead of an iframe code, you can sometimes use a simple URL. YouTube, Vimeo and Matterport, direct links are supported as the media sources in cards. Here are some examples of supported URLs:
Finally, you can use any URL as the media source. If the URL ends with .jpg, .png or .gif it will be interpreted and loaded as an image. Otherwise, it will be emdedded using an iframe. In the latter case, you need to make sure this URL allows embeds.
Cards & VR
Interactive cards are not currently supported in Virtual Reality headsets. They will work on all other devices though, including desktop, laptop, tablet and mobile. This is due to some technical limitations of WebXR API.
Cards require HTML/CSS rendering which is not supported in WebXR and links open in new tabs, which again is not supported by browsers in WebXR.
Website "refused to connect" error
A lot of major websites such as Google or Amazon block embedding for security reasons. If you see the message below in the media area, that means the website cannot be embedded: