Back to support

Interactive Cards

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 pixels 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 type, size and colors.

Embedding Media

Image galleries and other tours

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.

The same technique can be used to add image galleries to a card.

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!
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.
PDFa link to a PDF file will open in an embedded PDF reader
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:


        https://www.youtube.com/watch?v=6HygbD44_j4

        https://vimeo.com/163612678

        https://my.matterport.com/show/?m=kLGohTUGsnx&play=1

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 opening at startup

You can choose one card in each post to open automatically when it loads for the first time. This can be useful to display a welcome message, show an intro video or give users additional instructions. In order to set the card to open on startup, check the box below the Edit card button:

Kuula hotspot editor - open card at startup

Only one card can open at startup, so if you check the box on one card, other cards will be automatically deselected.

Notes

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:

Please note that Javascript based embeds are not currently supported, only standard HTML iframes.