Info Cards

How it works.

Step 1 of 6 **A marker in the tour** A blue i marker in the museum scene shows that there is something to read.

The card opens beside the panorama — Step 1 of 6 **A marker in the tour** A blue i marker in the museum scene shows that there is something to read.

Tours have to tell visitors something: what a room offers, what an exhibit is, when to visit and where to book. Info Cards shows that text in cards that open from any hotspot — beside the panorama on wide screens and as a sheet on phones, so visitors keep looking around while they read. You write each card once as a <data> element with title, formatted text, one photo or video, facts and up to three buttons, and every setting is an attribute of one XML element.

Installation.

1
Copy one folder

Put the encrypted plugin folder into your tour and add one plugin element to your tour XML.
2
Write your cards

Describe title, text, a photo or video, facts and buttons in <data> elements, with translations if you need them.
3
Mark your hotspots

Give any hotspot the attribute z360_info_panels_card with the card id; choose layout, colours and texts with attributes and seven CSS variables.

Why it makes a difference.

Read without leaving the tour

On wide screens the card opens beside the panorama, which stays usable; on phones it opens as a sheet that visitors drag up or away.

One card for every screen

You write a card once; Info Cards chooses the side panel, bottom sheet, drawer or centred window for the screen and keeps a playing video when the phone turns.

Third-party content only after a click

YouTube, Vimeo and embedded pages load only after the visitor's click and show your own poster before. This is a technical gate, not legal compliance: your duties as site operator stay yours.

Screenshots.

Try the demo

**Desktop** The whale card in the side panel beside the museum tour: photo, subtitle, text and facts.

**Phone** The video card as a bottom sheet on a phone, with its own play, mute and position controls.

**Detail** The welcome card as a centred window with opening hours and the Plan your visit button.

Settings.

Set as attributes in your tour XML.

Setting	Type	Default	Description
`active`	Yes / No	`true`	Turns Info Cards on or off; false closes the card and removes every part of the plugin from the tour.
`layout`	List	`auto`	auto chooses the side panel, bottom sheet or drawer for the screen; modal always opens a centred window. `automodal`
`slot`	List	`middle-right`	Side of the screen for the side panel on wide screens. `middle-rightmiddle-left`
`panel_width`	Number	`380`	Width of the side panel in pixels (280–600).
`offset`	Number	`16`	Distance of the side panel from the screen edge and from other z360 elements, in pixels (0–200).
`theme`	List	`dark`	Dark or light colours of the cards. `darklight`
`accent_color`	Color	`#3D8BFF`	Colour of the main button, links, focus ring and video progress.
`startup_card`	Text	—	Id of a card that opens as a centred window when the tour starts; empty for none.
`startup_once`	Yes / No	`true`	Shows the startup card only on the first visit in this browser.
`close_on_scene_change`	Yes / No	`true`	Closes the open card when the tour changes the scene, except when the card's own button changed it.
`deeplink`	List	`read`	read opens a card from a link such as tour.html?z360-info-panels=whale; off ignores such links. `offread`
`copy_link`	Yes / No	`false`	Shows a Copy link button in the card header.
`pause_tour`	Yes / No	`true`	Pauses tour sounds and tour videos while the card's video or embedded content plays and continues exactly those afterwards.
`vr`	Yes / No	`true`	true shows the card as a panel in the scene while VR is active; false closes it in VR and opens it again after VR.
`debug`	Yes / No	`false`	Prints the number of cards and bound hotspots and more details to the browser console.
`text_card`	Text	`Information`	Name of a card without a title, read by screen readers.
`text_close`	Text	`Close`	Label of the close button.
`text_copy_link`	Text	`Copy link`	Label of the Copy link button.
`text_gallery`	Text	`Gallery`	Label of the Gallery button; the number of items is added.
`text_load_content`	Text	`Load content`	Button that loads a YouTube or Vimeo video or an embedded page.
`text_open_new_window`	Text	`Open in new window`	Link under YouTube, Vimeo and embedded content.
`text_embed_failed`	Text	`This content could not be loaded here.`	Message when an embedded page has not loaded after 8 seconds.
`text_play`	Text	`Play`	Label of the video play button.
`text_mute`	Text	`Mute`	Label of the video mute button.
`text_position`	Text	`Playback position`	Label of the video position slider.
`text_vr_unavailable`	Text	`Available outside VR`	Line on the VR panel for a video or an embedded page.

Example

<plugin name="z360_info_panels"
        url="plugins/z360_info_panels/z360_info_panels.js"
        keep="true"
        startup_card="welcome" />

<data name="z360_info_panels_card_whale" title="Whale skeleton" subtitle="Hall of mammals"
      image_url="media/whale.jpg" image_alt="Ribs and skull of a whale skeleton"
      facts="Length|about 20 m;Group|baleen whales"
      cta1_label="Show in the hall" cta1_url="scene:scene_hall_of_mammals"><![CDATA[
  <p>You are standing <b>inside</b> the skeleton.</p>
]]></data>

<scene name="scene_whale_skeleton" ...>
  <hotspot name="hs_whale" type="text" html="i" ath="-90" atv="-12"
           z360_info_panels_card="whale" />
</scene>

Features

Side panel on wide screens: the panorama, its hotspots and other plugins stay usable
Bottom sheet on phones in portrait, drawer in landscape; turning the phone keeps the card and a playing video
Centred welcome card when the tour starts, once per browser
Title, subtitle, formatted text, facts list and up to three buttons per card
One photo, MP4 or WebM video with its own controls, YouTube or Vimeo video or embedded page per card
YouTube, Vimeo and embedded pages load only after the visitor's click, with your own poster before
Buttons open a web page, e-mail, a phone number, another card, a scene with a view, or your own krpano action
Links that open the tour with a card: tour.html?z360-info-panels=<card>
Pauses tour sounds and tour videos while the card's video plays and continues only what it paused
Card texts in several languages without duplicating cards
Gallery button that opens Media Gallery when both plugins are in the tour
VR card in the scene with the krpano WebVR plugin — tested in browser VR emulation, not yet on VR headsets
Keyboard control, focus handling and screen reader labels
Dark and light theme, accent colour and seven CSS variables
Events for your tour XML; encrypted plugin files, every setting as an XML attribute

What's included

plugins/z360_info_panels/z360_info_panels.js (encrypted)
plugins/z360_info_panels/z360_info_panels.xml (encrypted, optional: card links without showing the start scene first)
Manual (English)