Integrate Anywhere

Great that you have come this far.

Congratulations on deploying your metaverse. Now, it's time to share it with your fans.

Follow the steps below to integrate your metaverse into your website.

• Add the below script inside the head tag of your html

<link rel="https://temp-yom-branding.s3.eu-west-1.amazonaws.com/yomStyles.css">
<script src="https://temp-yom-branding.s3.eu-west-1.amazonaws.com/yomScript.js"></script>

• Create a div element where you would like to place your metaverse and have it id as yomBase. Add a custom attribute called metaspaceurl with the url of the space as it's value. You can get the url via the Bridge app under the info section of your space.

<div id="yomBase" data-metaspaceurl="<url>"></div>

• Inside the yomBase div element create another div element with id yomContainer. This div would be used to stream your metaverse

<div id="yomBase" data-metaspaceurl="<url>">
  <div id="yomContainer">
  </div>
</div>

• To enter the metaverse user needs to enter their name, for this you need to create a form with input text and a button. Here is an example. Feel free to modify this as per your requirement/theme. Please note that the id of the form needs to be authContent and guestButton for the submit button

<div id="yomBase" data-metaspaceurl="<url>">
  <div id="yomContainer">
  </div>
  <form id="authContent">
	<input type="text" id="nameInput" name="name" placeholder="type your name here..." maxlength="120">
	<input type="button" id="guestButton" value="enter now">
  </form>
</div>

• Overall, the complete code should look like above.

• Once the user clicks the "enter now" button, your metaverse would be loaded! Try it out. That's it! You are good to go!

• If any questions/issues, feel free to reach out to our team @ [e-mail]