So you’ve just finished creating your very own corner of the metaverse using our step-by-step guide to deploy Immers Space with Mozilla Hubs, now what? We’ll walk you though making it uniquely yours by setting the scenery, adding some avatars for other immersers to collect, and learning how to earn money from your immer without spoiling the experience with ads by using Immers Space’s exclusive features for offering premium Web Monetized content.
What’s Web Monetization?
Web Monetization is a new business model for the Web. Instead of cluttering your creations with ads, sacrificing user privacy, and becoming dependent on the whims of an ad network, your immersers can pay you directly with streaming micropayments. They sign up for a provider like Coil.com, and while they spend time in your immer, fractions of pennies are sent to your account every few moments, adding up to about $0.50 per hour per user.
Importing and customizing scenes from Hubs
One of the first things you’ll need to add to your immers is a scene – this is the 3D environment that visitors will enter and explore. You immer has a built-in scene editor called Spoke that you can use to create unique environments composed from 3D models, but you can also get a quick start by importing some Creative Commons Hubs scenes.
- Visit hubs.mozilla.com
- Click “Create Room”
- Click the small “Options” button
- Click “Change scene”
- Login, if prompted
- Browse listed scenes or search to find even more
- Right-click the scene preview image and choose “Copy link”
- Return to the Admin page of your immer’s hubs cloud
- Click “Import Content”
- Paste the copied link into the form and click “Preview Import”
Read more about importing content in the official Hubs documentation.
Making scenes available only to paying immersers
You can specify which scenes are free and which ones are only available for premium users with tags. Scenes with a “default” tag will be used when the standard “Create room” button is clicked, and scenes with the “premium” tag will only be accessible through a special “Premium scenes” section on the homepage
- Visit your Hubs cloud admin panel
- Click “Approved scenes”
- Click “Edit” on the chosen scene
- Click “ADD” under the Tags section
- Delete the placeholder text in the new tag and replace it with “premium” (without quotes)
- If the scene has a “default” tag, click “REMOVE” to remove this scene from the free scenes.
- Click SAVE
Back on your Hubs landing page, you’ll find a new section with buttons to create rooms with premium scenes like in the image below.
Importing avatars from Hubs
In addition to scenes, you also need to provide some avatars for users to wear. You can import avatars from Mozilla Hubs in the same manner as scenes above, just choose “Change Name & Avatar” from the “More” menu and then click “Change Avatar” to browse the avatar collection, or visit the Hubs Cloud docs on importing content to get started with an asset pack.
Make sure to set some avatars as “Default” and some as “Featured” when importing to give users easy-to-find choices.
Adding discoverable premium avatars in your scenes
You can also make some avatars only available to paying customers. To do this you’ll need to de-list it from the free avatars and then edit your scene to add in a spot where users can find the premium avatar and, if they are monetized, add it to their collection.
- In your Hubs Cloud admin panel, click “Approved avatars”
- Find the avatar you want to make premium, and make of note of its URL for later by right clicking the link in the “Avatar listing sid” column and choosing “Copy link address”
- Click the “EDIT” button for the selected avatar
- Change “State” to “delisted”
- Click “SAVE”
- In your Spoke scene editor, click the “Link” item from the “Elements” panel
- Click again in your scene to place the link
- In the properties panel, paste the avatar URL into the “Url” field
- Set the “Name” to “st-monetization-interactable“
The avatar will appear as just a link icon in you scene editor, but, after your publish, it will appear as an image of the avatar. Setting the name is important as this is what tags it as only being available to monetized users. You may optoinally add an image such as a monetization icon nearby with the name “st-monetization-required” to provide a link to sign up for non-monetized users or a thank you note to monetized users.
Activating premium content in scenes
You can also tag any object in Spoke to visible only for monetized users by giving it the name “st-monetization-visible” or, to make it visible for everyone in the room as long as at least one user is monetized, use the name “st-monetization-visible st-monetization-networked”