Hubilo provides a virtual venue for organizations to provide an engaging and interactive event experience to their global audience and transform the way people connect, interact, and host events.
Hyperspace Metaverse Platform Dashboard
Add the Metaverse Portal to Hubilo
Add the App to the Top Navigation
Full Metaverse Events in Hublio
Hyperspace Metaverse Platform Dashboard
First, copy the URL for your 3D event world.
- On your MootUp Dashboard, click the Worlds menu. Then, click the three-dot menu icon () on your event world’s tile and a pop-up menu will appear.
- From that menu, select Export.
An Export this World dialog box will appear.
- Click the down arrow () to expand the Webpage embed export panel
- Click the clipboard icon to copy the World’s Embed Code
Add the Metaverse Portal to Hubilo
Hubilo Embedded Apps
On the left menu choose Embedded Apps
- Click the Add integration button
- Click +Embed Your App
- Select an App Icon, we recommend using the Map icon
- Type your App Name, we recommend Metaverse
- Paste the iframe code you copied from the Hyperspace Metaverse Dashboard into the Embed Code text area
- Click the Add button
You will see the new Embedded App in your list. Next you will add this to the Hubilo navigation interface.
Add the App to the Top Navigation
On the left hand menu scroll down and click Settings
Choose Event Sections
- Find the area called Side panel
- Click on the Metaverse App and start to drag it up
- Drag the Metaverse App to the Top Navigation section
- Drop it where you would like it to appear, we recommend after the Agenda
The Metaverse embedded app is now available on the main navigation menu. When a participant clicks on it the 3D virtual event world is displayed.
Mobile configuration
It’s wise to consider participants on all devices. To ensure easy access to the Metaverse for mobile users follow these steps.
- Click the Mobile button in Settings > Event Sections
- Ensure the Metaverse App is in the first 4 menu items
Full Metaverse Events in Hublio
You can take the experience further by adding additional embed codes for each space in your event world and adding them to the Event Sections in Settings.
In this way you can create a full 3D event for reception, stages, exhibitions, sessions, networking.
Just adjust to portal code to include a different spaceID
Eg. Export Iframe gives
<iframe src="https://app.learnbrite.com/dashboard/spaces/visit/spcd96b7154eb2c995ac073f4?worldId=wrl7c40786500bf6ca3746824" allow="xr-spatial-tracking; display-capture; magnetometer; picture-in-picture; wake-lock; screen-wake-lock; vr; geolocation; microphone; camera; midi; encrypted-media; autoplay; fullscreen; gyroscope; accelerometer;" id="learnbriteSpaceFrame" width="300" height="150" frameborder="0" scrolling="no" style="overflow: hidden; border: 0; position: absolute; padding: 0; margin: 0; width: 100%; height: 100%; z-index: 100;"></iframe> |
We know the space ID of the Expo Hall is spc02b82381c57777bd6efc06
So we change the iframe code for the second Embedded App to
<iframe src="https://app.learnbrite.com/dashboard/spaces/visit/spc02b82381c57777bd6efc06?worldId=wrl7c40786500bf6ca3746824" allow="xr-spatial-tracking; display-capture; magnetometer; picture-in-picture; wake-lock; screen-wake-lock; vr; geolocation; microphone; camera; midi; encrypted-media; autoplay; fullscreen; gyroscope; accelerometer;" id="learnbriteSpaceFrame" width="300" height="150" frameborder="0" scrolling="no" style="overflow: hidden; border: 0; position: absolute; padding: 0; margin: 0; width: 100%; height: 100%; z-index: 100;"></iframe> |
After updating the Event Sections list in Settings you can now see two Metaverse locations in the main menu.
Making the 3D portal fullsize
By default Hubilo Embedded Apps use a smaller amount of screen realestate. This is ok for videos, however for metaverse experiences you’ll want to maximize the are for higher engagement and enjoyment.
Go to Settings > Integrations > Custom Integration and click the Configure button
Under the Configure Custom Integration panel ensure Community tab is selected.
In the text area Start of <HEAD> paste in the following CSS code:
<style> |
Click the Save button.
Now when you visit the Metaverse Embedded App in Hubilo it will use more of the available screen.
