Skip to main content

Quick Start Guide

This guide provides all of the steps required to get you up and running with the 8th Wall Cloud Editor and Built-in Hosting platform.

Create an 8th Wall Account​

Creating an 8th Wall Account gives you the ability to:

  • Create rich Web AR experiences that run directly in a mobile web browser.
  • Collaborate with team members and store code in source control.
  • Instantly preview projects as you develop.
  • Wirelessly debug your code in real time with live console logs from multiple devices.
  • Publish projects hosted on 8th Wall's global network.
  • Manage subscriptions, billing information and licenses for commercial projects.
  • Create a Public Profile and Feature Projects on 8thwall.com, allowing you to showcase your work, live demos, and/or code.

New Users: Sign up for a 14-day free trial at https://www.8thwall.com/try-free-trial

Existing Users: Login at https://www.8thwall.com/login using your email address and password.

Start Free Trial​

The 8th Wall Cloud Editor and Built-in Hosting platform are available to workspaces with a paid subscription. 8th Wall offers a 14-day free trial so you can get access to the full power of 8th Wall and begin building WebAR experiences.

At the end of your 14-day free trial, your account will automatically upgrade to a paid plan. You must cancel your free trial before the end of the trial period to avoid charges. 8th Wall subscriptions automatically renew until you cancel. There are no refunds or credits for partial or unused months. To manage your subscription settings, please see Account Settings Guide

  1. From the 8th Wall Homepage or Pricing page, click Start Free Trial

  2. Create your account by entering your Name, Email and Password. Review and confirm: Accept the 8th Wall Terms and Conditions and then click Next.

TrialCreateAccount

  1. Confirm your email address. An email will be sent with a verification code. Enter the verification code and click Confirm.

TrialConfirmEmail

  1. Select a plan: From the drop down menu select the Starter, Plus, or Pro plan. You can pay Montly or Annually after the free trial period is over.

TrialSelectPlan

  1. Enter your credit card details.

IMPORTANT! At the end of the 14-day free trial period, your account will automatically upgrade to the selected paid plan. You must cancel the free trial before the end of the trial period to avoid charges. There are no refunds or credits for partial or unused billing periods. To manage your subscription settings, please see Account Settings Guide

The free trial screen will display the date your trial ends and you will be automatically charged, if you don't cancel:

TrialAgreeTermsAndStart

  1. Click Complete Purchase.

Create your workspace​

  1. Enter a Workspace Name. This value is for display purposes only and doesn't impact any URLs associated with your workspace.

  2. Enter a Workspace URL. Pick something relevant for your workspace name, such as the name of your company.

IMPORTANT: This value will be used as the default sub-domain for ALL 8th Wall hosted projects in your account (e.g. mycompany.8thwall.app/project-name). This value will also be used in your Public Profile page URL (e.g. www.8thwall.com/**mycompany**).

You cannot change this value later, so choose wisely!

CreateYourWorkspace

Note: if you want to connect custom domains to your 8th Wall hosted projects to override the default URL, please see here.

Start a new project​

  1. From the Homepage (logged in) or Workspace Dashboard, click "Start a new Project"

StartNewProject

  1. Select Hosting Type (Pro/Enterprise plans only): Decide up front if the project will be hosted by 8th Wall and developed using the 8th Wall Cloud Editor, or if you'll be self-hosting. This setting cannot be changed later. Self-hosting is only avilable to paid Pro/Enterprise workspaces. Self-hosting is not available to workspaces on Starter or Plus plans, or workspaces on the Pro plan during the free trial period.

  2. Select a Project Name: The project name is used both in th default project URL (e.g. mycompany.8thwall.app/project-name) as well as the Featured Project page URL (e.g. www.8thwall.com/mycompany/project-name). It cannot be changed later.

  3. Select a License Type (Pro/Enterprise only)

NewProjectBasicInfo

License Types:

  • Commercial: Commercial projects are intended for commercial use. When you’re ready to launch a commercial project publicly, you will need to purchase a monthly Commercial License which varies based on views. NOTE: Commercial projects cannot be purchased during a free trial. If you need to purchase a commercial license, you can end your free trial early and begin your paid subscription.

  • Demo Use: You may create unlimited demo projects which are publicly viewable and strictly intended for pitching prospective work. A "Demo Use Only" label will appear on the loading screen. If you decide to commercialize your project at any point, switch to "Commercial" in the Project Dashboard.

  • Web App: You may create unlimited first-party projects under this license. Web app projects require the splash screen to remain on and will be publicly viewable on 8thwall.com as soon as you publish. This license does not permit projects created for work-for-hire as they require a Commercial license.

Clone template project​

  1. After creating a project, select a template to clone. In this guide, select "A-Frame: Tap to Place Ground". This interactive example allows the user to spawn 3D models on the surface in front of you by tapping. This showcases raycasting, instantiating objects, importing 3D models and the animation system.

EditorCloneProject

  1. On the following screen, a project README will be displayed. [Optional] To test out the template before cloning, click the Launch button and scan the QR code with your phone.

  2. Click the Clone Project button to proceed. The sample project will be cloned into your workspace, and the Cloud Editor will be opened.

Live Preview​

  1. At the top of the Cloud Editor window, click the Preview button.

  2. Scan the QR code with your mobile device to open a web browser and look at a live preview of the WebAR project.

GettingStartedPreview

  1. When the page loads, you'll be prompted for access to motion and orientation sensors (on some devices) and the camera (all devices). Click Allow for all permission prompts. You will be taken to the private development URL for this project.

Note: The "Preview" QR code displayed within the Cloud Editor is a temporary, one-time use QR code only meant for use by the developer while actively working in the Cloud Editor. This QR code takes you to a private, development URL, and isn't accessible by others. To share your work with others, please see the section below on Publishing your project.

  1. When the WebAR preview loads, tap on the surface in front of you to spawn 3D models.

  2. Result:

PlaceGround

Save, Build and Land​

At this point, you have a fully operational Web AR project and have previewed it on a mobile device. Next, make a very small code change to illustrate how to update the project, preview the new code, and land the changes into source control.

  1. Within body.html of the Cloud Editor project, make a small text change to the promptText. For example, simply change the text from Tap To Place Model to Tap To Begin.

  2. Click Save + Build to save your work and initiate a new cloud build of your project.

SaveBuild

  1. If your mobile browser is still open from scanning the Preview QR code in Step 2, your phone will automatically reload once the build completes. If the mobile browser page is no longer open, scan the Preview QR code again to preview your updates to the project.

  2. Once satisfied with your changes, land the updated code into the Cloud Editor's integrated source control. At the top-right of the Cloud Editor window, click Land. The button will be green, indicating that there are changes in the project that have not yet been landed into source control:

LandUpdates

  1. In the Message field enter a brief message describing the changes made, then click Land:

LandReview

Publish your project​

The final step is to publish your updated and landed project code using 8th Wall's Built-in Hosting. This allows the project to be viewed publicly by anyone on the internet.

Note: Commercial projects require additional commercial licenses when launched. See https://www.8thwall.com/pricing for more info.

  1. At the top right of the Cloud Editor window, click Publish

CloudEditorPublishButton

  1. In the Publish Project modal, you will see a list of commits (one for each version of code you have landed into source control) as well as the Development, Staging and Public URLs for the project. Select top radio button in the Public column to deploy the latest/newest version of code to the project's Public URL, then click Publish:

GettingStartedPublish

  1. Complete the publish process by giving your project a title, description and cover image. This info will appear on your Featured Project Page and as a preview when you share on social platforms and messaging apps.

GettingStartedFinishPublish

View the public project​

  1. Go back to the Project Dashboard in the left nagivation. In the QR 8.code section, the Public project URL will be displayed along with both an 8th.io shortlink and associated QR code.

  2. Scan the QR code with your mobile device to view the Public Web AR experience.

ProjectDashboard8wHostedQR