RenderDraw Documentation
  • About RenderDraw
    • What is RenderDraw?
    • RenderDraw Philosophy
    • Key features and benefits
  • Introduction
  • Getting Started with RenderDraw
    • Installation
    • Adding a RenderDraw License to a user's account
    • RenderDraw Permission Sets
      • Using user access policies for automated permission set & License Assignment
    • Relating Drawings to a Salesforce Record
    • CAD Conversion
      • Setup of CAD Conversion
      • UI CAD Conversion for Salesforce for Salesforce Admins
      • Version 1
        • CAD Conversion API (Direct Use)
          • Example input for Conversion
      • Version 2 (proposal)
        • Purpose
        • Sample File Input Conversion
  • Diving deeper
    • RenderDraw Architecture
      • RenderDraw Components
      • Storage of your Drawings
        • Connecting to your drawings
      • Supported Formats
    • Relationships
      • Why Metadata Matters
        • Advanced Metadata Relationships
          • Child Lookup
          • Parent-Child Relationships
      • Record Management
        • Scene Settings
    • Performance Considerations
    • Development Resources
    • Using Components on LWR Digital Experiences
    • Utilizing Interactions within Lightning Flow
    • Fixing Common Issues
  • Usage Scenarios
    • Use Cases
      • 2D
        • Part Finder
          • Data Setup for B2B
            • Choose where you want to display your Product Catalogs
            • Setup Field on Catalog Object
            • Setup Group and Files
          • Parse PDF Catalogs to attach images
          • Base setup for initial catalog page
            • Sharing of Files
            • Clone Pages
          • Create Callouts for Parts
          • Utilize OCR to highlight callouts
          • Optionally show inventory or availability based on data
          • Create Interactions for hover and click actions
          • Create a reusable, connected Datatable
        • Custom 2D App Development using Salesforce
        • 2D Admin Guide (Clicks, not Code)
          • Setting your object up for 2D visuals
          • Setup 2D Scene Settings for a record
          • Add a background image to your scene
          • Adding Droppable Areas and Drop Zones to a Scene
          • Adding Draggable Items to a Scene
          • Relating Components to Salesforce Data
          • Add a DataSource to a 2D scene to bind data
          • Adding Layout Drawing menu to your component (Floorplan & Spatial Drawing)
          • Linking your clicks to Actions / Flows
          • Visual Rules engine
          • Hover Actions and Popovers
          • Change your Layout Drawing visuals based on Salesforce Data in a DataSource query
          • Enable users to take snapshots
          • Show additional Drawings with your 2D Canvas
          • Use Color Selection to add clickable regions to your 2D Scene
          • Use OCR to add Clickable regions to your 2D scenes.
            • Enable Azure OCR in your Remote Site settings & Metadata
            • Add Layout Areas using OCR
        • Data interaction within a Flow
          • Modifying Canvas with APEX
        • 2D User Guide
          • Take a snapshot
      • 3D
        • Admin
          • Adding Components to your Lightning Pages
          • Examples
            • Asset Management
            • Product Visualization
            • Setup for 3D Visual Configuration Scenarios
              • Salesforce CPQ
              • Conga CPQ
              • Custom Configuration Scenarios
            • 3D Product Photography
          • Setup 3D Scene
            • Visual Scene Setup
              • Interaction Events
              • Grouping
              • Labeling
              • Actions
              • Attributes (Look & Feel)
            • Configuration
              • Interaction Events
                • Action Items
                • Conditions
                • Steps
        • Developer
          • Custom 3D App Development using Salesforce
        • End-User Usage
          • View Related 3D Converted files on a record
          • 3D Annotations & Comments
      • CAD Conversion
        • CAD Conversion using Admin UI
          • Prior to getting started...
          • CAD Conversion UI within Salesforce
        • Automatic Conversion in Salesforce
          • Integration User
          • Remote Site Setting
          • Setup Connected App
          • Setup Custom Settings for Triggering Conversion
          • Test your Files
          • Extending the integration using Platform Events
      • RenderDraw Interactive Maps
        • Admin Setup
        • End User Usage
      • Other Apps
        • RenderDraw Data Utilities
          • Essentials
            • Swiper
            • Flow Image display
            • QR Code Generator
            • QR Code Scanner
          • Standard
            • 360º Virtual Tours
              • Administration
              • Usage
            • AnnotateIt! Images
              • Admin's Guide to AnnotateIt! components
              • Permissions / Authorization
            • Standalone Datatable
          • Advanced
            • AnnotateIt! PDF Editor
            • Parsing PDFs
            • CSV Importer
        • RenderDraw for Propel
          • Initial Setup
            • Common Issues
          • CAD Conversion & Visual Viewing
          • Annotate Item Attachments
        • MeasurePro (iOS App)
          • Creating a Deep Link to Launch with Parameters
      • Interacting with RenderDraw using Lightning Messaging Service (LMS)
        • Canvas Element Hovered
        • Canvas Element Selected
        • Canvas Initialized
        • Canvas Interaction
        • Record Selected
        • Code Example of Listening to LMS Events
  • API Documentation
    • 3D Components API
      • Events (Aura)
        • EVT_Renderer_Context_Details_Closed
        • EVT_Renderer_Element_Added
        • EVT_Renderer_Get_CameraPositionandTarget
        • EVT_Renderer_Get_Hierarchy
        • EVT_Renderer_Loaded
        • EVT_Renderer_Mesh_Selected
        • EVT_Renderer_Mesh_Selection_Cleared
        • EVT_Renderer_Select_Component
        • EVT_Renderer_Screenshot_Taken
      • Components (Aura/LWC)
        • 3D Interaction Canvas (LWC)
        • 3D Advanced Renderer (Aura)
        • 3D Scene Director (Aura)
        • 3D Simple Renderer (Aura)
        • 3D File Attachment Viewer (Aura)
    • 2D Components API
      • 2D Interaction Canvas
      • 2D Scene Director
    • Universal Components Used throughout the Suite
      • dynamicContentComponent_treeGrid
    • Data Objects used throughout the Suite
      • Canvas
      • BaseCanvasItem
      • LayoutWall
      • DropZone
      • DroppableArea
  • 👬Digital Twin
    • Digital Twin App
      • Setup
        • Steps to Setup Digital Twin Capabilities
        • RenderDraw Relationship Settings
        • Visualization
      • Asset Search
      • Digital Twin LWC Component
        • Custom Component Interaction with Renderer
        • Digital Experience Tips and Tricks
Powered by GitBook
On this page
  1. Usage Scenarios
  2. Use Cases
  3. Other Apps
  4. RenderDraw Data Utilities
  5. Standard
  6. 360º Virtual Tours

Administration

Previous360º Virtual ToursNextUsage

Last updated 2 years ago

Prior to starting this, ensure you have your 360º photos available to upload and have assigned the "Virtual Tour Admin" permission set to your Salesforce user.


1. Go to the page where your RenderDraw 3D Virtual Tour has been added

2. We see there are no images uploaded. Let's add some!

3. Click on Add Image

4. The image upload dialog appears. Where do we want to find our 360º photo? We can select a file locally and relate & save it to this record or use a URL link from a CDN or other web source.

5. For this example, let's upload the image. Click on Upload Image

6. Find your photo, ours is labeled "1.jpg" from file upload menu

7. Once completed, select the done button.

8. Now our first "Room" has loaded. We see the interactive image come to life by clicking and dragging.

9. Now that we've explored a bit let's add additional rooms to navigate on this tour! Click on the settings menu to add more.

10. Once in edit mode, click anywhere on the screen that you want to add a hotspot. Once added, a dialog will display with options to link to an existing room or add new photos.

11. Let's upload a second image. Click on Upload Image

12. If your images are already uploaded and related to this record, you can click on the image from the related list. Otherwise, upload another photo. Once uploaded, Click on image once uploaded

13. Click save to confirm adding the new room

14. Great, now from the second room, let's link back to the first room. It's no fun getting stuck as a user, so we always have to ensure they can get to and from each destination they click into.

Add another hotspot by clicking back toward the original room/ where you want your users to click. From there, our dialog is displayed again.

15. Since the Room already exists, click Click on Select Room. This will navigate back to the first photo, along with the hotspots that were initially added.

16. Select the first room by clicking on the image

17. Bam! Back where we started. Perfect. Now the users can navigate to and from this first room to the second. You can repeat this process for how many rooms you need for the virtual tour.

18. Once finished, do not forget to Click on Publish! This is how your users will see this tour the next time the record & component are loaded.

19. Success! We published our virtual tour. Now the next time this record is loaded the new tour should be visible.

20. Now let's preview it as the user will see it. We do this by pressing the preview button (looks like an eye). You'll notice that once pressed, the icon switched to the gear, representing how to get back into admin view. We also have a fullscreen button added to the menu

21. Click on the fullscreen button

22. The fullscreen preview will take over the Salesforce screen for your users to interact.

23. Great, navigation works by clicking on the visible hotspots. Once you've navigated your entire tour, exit fullscreen by pressing the fullscreen button in the top right

24. The fullscreen dialog closes, and we're back where we started!

25. Excellent work! You just setup a virtual tour within Salesforce with no prior experience.


This Workflow was created with Tango.
3D Virtual Tour
We see there are no images uploaded. Let's add some!
Click on Add Image
The image upload dialog appears. Where do we want to find our 360º photo? We can select a file locally and relate & save it to this record or use a URL link from a CDN or other web source.
Find your photo, ours is labeled "1.jpg" from file upload menu
For this example, let's upload the image. Click on Upload Image
Now that we've explored a bit let's add additional rooms to navigate on this tour! Click on the settings menu to add more.
Now our first "Room" has loaded. We see the interactive image come to life by clicking and dragging.
Once in edit mode, click anywhere on the screen that you want to add a hotspot. Once added, a dialog will display with options to link to an existing room or add new photos.
If your images are already uploaded and related to this record, you can click on the image from the related list. Otherwise, upload another photo. Once uploaded, Click on image once uploaded
Let's upload a second image. Click on Upload Image
Great, now from the second room, let's link back to the first room. It's no fun getting stuck as a user, so we always have to ensure they can get to and from each destination they click into.
Select the first room by clicking on the image
Click save to confirm adding the new room
Since the Room already exists, click Click on Select Room. This will navigate back to the first photo, along with the hotspots that were initially added.
Bam! Back where we started. Perfect. Now the users can navigate to and from this first room to the second. You can repeat this process for how many rooms you need for the virtual tour.
Success! We published our virtual tour. Now the next time this record is loaded the new tour should be visible.
Once finished, do not forget to Click on Publish! This is how your users will see this tour the next time the record & component are loaded.
The fullscreen preview will take over the Salesforce screen for your users to interact.
Great, navigation works by clicking on the visible hotspots. Once you've navigated your entire tour, exit fullscreen by pressing the fullscreen button in the top right
The fullscreen dialog closes, and we're back where we started!
Click on the fullscreen button
Once completed, select the done button.
Now let's preview it as the user will see it. We do this by pressing the preview button (looks like an eye). You'll notice that once pressed, the icon switched to the gear, representing how to get back into admin view. We also have a fullscreen button added to the menu