Embedding Spacify tours within your website(s)

Currently we exclusively offer integration of our tours through iframe technology. We're planning on releasing a full Javascript API driven library in the future which will make configurating settings more accessible. If you have questions regarding implementation or change requests, please feel free to contact us at info@spacify.be.

Table of contents

• Basic embed
• Less basic embed
• Custom branding

Basic embed

A default embed code would look something like the code below. Keep in mind you'll need to add a wrapper element around the iframe with a fixed height so the iframe has space to stretch in height.

<iframe src="https://www.spacify.be/tour/[tour_id]" class="spacifyEmbed" style="width: 100%; height: 100%;" frameborder="0">https://www.spacify.be/tour/[tour_id]</iframe>

Basic embed codes can be obtained by logging in to your account, going to your dashboard and click the embed icon.

Less basic embed

A limited variation of parameters can be passed through the iframe's url (query string). This way you can customise the looks of you embedded tour. Parameters can be added as the example below.

<iframe src="https://www.spacify.be/tour/[tour_id]?parameter1=value1&parameter2=value2&parameter3=value3" class="spacifyEmbed" style="width: 100%; height: 100%;" frameborder="0">https://www.spacify.be/tour/[tour_id]</iframe>

Parameters that can be passed:

• branding (int)
  Toggles the Spacify branding on top.
  Default: 0
• clientLogo (int)
  Gives the possibility to hide main logo.
  Default: 1
• lang (int)
  Determines the language of the tour and the content that will be called by AjaxOverlay. If language is wrong or undefined, the default language will be shown. Not all tours are configured to work with lang.
  Default: nl
• scrollZoom (int)
  Toggle the use of the mouse wheel as zoom control.
  It is preferable to use zoomControls=1 instead for better usability on embedded tours.
  Default: 1
• zoomControls (int)
  Toggles the manual zoom buttons.
  Calls function: manualZoom(direction, amount);
  Default: 0
• autoTilt (int)
  Toggles a slight tilting animation after that will be triggered some time after user interaction stopped.
  Calls function: autoTilt(waitTime, speed);
  Default: 0
• vrToggleButton (int)
  Toggles the visibility of the VR mode switch.
  Calls function: toggleVr();
  Default: 0
• vrModeDefault (int)
  Opens tour in VR mode on page load.
  Calls function: switchToVr();
  Default: 0
• activateGyro (int)
  Toggles accelerometer usage to look around on mobile.
  calls function: activateGyro();
  Update As of mid 2019 this feature is blocked on some mobile devices. Since this is dependant on hardware components we are not able to guarantee a workaround.
  Default: 0
• allowFullScreen (int)
  Toggles the fullscreen switch.
  Calls function: enterFullScreen();
  Default: 0
• tourControls (int)
  Toggles buttons to go to next/prev scene.
  Calls function: tourControls();
  Default: 0
• instructionScreen (int)
  Toggles the instructions that are shown on load.
  Calls function: instructionScreen(mode, waitTime, fadeOutSpeed);
  Default: 1
• showSocial (int)
  Toggles button to share tour.
  Default: facebook|twitter|linkedin
  Disable: showSocial=0

Custom branding

By logging in to your account you get edit access to tours assigned to your account. You will be able to change your company logo (and link), hotspot styling and upload a custom css file to change overall colors etc. You will also be able to change meta data which is shown when sharing a tour on social media.