# Administration

{% embed url="https://app.tango.us/app/workflow/3D-Virtual-Tour-6f7db3584cb54edb92e7d3fb92149002" %}

## [3D Virtual Tour](https://app.tango.us/app/workflow/6f7db358-4cb5-4edb-92e7-d3fb92149002?utm_source=magicCopy\&utm_medium=magicCopy\&utm_campaign=workflow%20export%20links)

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!

![We see there are no images uploaded. Let's add some!](https://images.tango.us/workflows/6f7db358-4cb5-4edb-92e7-d3fb92149002/steps/844cc52c-3526-4fc7-ba9f-e769b845ef3a/76688b55-203f-4b5c-85a7-93c741232e08.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2624%3A1476)

#### 3. Click on Add Image

![Click on Add Image](https://images.tango.us/workflows/6f7db358-4cb5-4edb-92e7-d3fb92149002/steps/84a36d70-ce3b-48ea-a14d-502b2ee92c5a/34e5f286-406c-4e4e-ad25-e3239ec63c39.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.9524\&fp-y=0.3675\&fp-z=2.9891\&w=1200\&ar=2624%3A1476)

#### 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.

![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.](https://images.tango.us/workflows/6f7db358-4cb5-4edb-92e7-d3fb92149002/steps/3f8e33bb-3544-4771-8e4b-e981ca81cbec/faff08af-4711-4cf8-a845-f902788792ac.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5002\&fp-y=0.4695\&fp-z=1.4907\&w=1200\&ar=2624%3A1476)

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

![For this example, let's upload the image. Click on Upload Image](https://images.tango.us/workflows/6f7db358-4cb5-4edb-92e7-d3fb92149002/steps/0d7ea013-f8b1-4b6c-bac5-c56cea5fac6d/fdf016fc-f45b-49fe-81b4-8505a84f4985.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.4699\&fp-z=2.6907\&w=1200\&ar=2624%3A1476)

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

![Find your photo, ours is labeled "1.jpg" from file upload menu](https://images.tango.us/workflows/6f7db358-4cb5-4edb-92e7-d3fb92149002/steps/4ac4c3ce-9dda-438c-8555-65ee3df3de4a/2353e140-a47b-4733-8cb4-ffcab0145251.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2624%3A1476)

#### 7. Once completed, select the done button.

![Once completed, select the done button.](https://images.tango.us/workflows/6f7db358-4cb5-4edb-92e7-d3fb92149002/steps/4fe201b7-d684-450a-8e06-b6c48e766c8e/7cb371da-a317-4f23-a966-f20e5792ec7a.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5002\&fp-y=0.5512\&fp-z=1.4907\&w=1200\&ar=2624%3A1476)

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

![Now our first "Room" has loaded. We see the interactive image come to life by clicking and dragging.](https://images.tango.us/workflows/6f7db358-4cb5-4edb-92e7-d3fb92149002/steps/2d150a18-bbf8-4d5c-9a3f-33cecd4c426c/bbf4e52b-4b19-434f-bab7-a2eee38d0e3c.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4998\&fp-y=0.5881\&fp-z=1.0178\&w=1200\&ar=2624%3A1476)

#### 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.

![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.](https://images.tango.us/workflows/6f7db358-4cb5-4edb-92e7-d3fb92149002/steps/ecc36080-25cc-4e6b-978c-012aec8ea355/2becb0bc-5da0-44f0-8bee-20301eed8bab.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2624%3A1476)

#### 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.

![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.](https://images.tango.us/workflows/6f7db358-4cb5-4edb-92e7-d3fb92149002/steps/a8a55122-7335-403e-98bb-e5dc419b6e3a/1de614bb-60fa-4afe-9d69-2ad3bca1b6a0.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4823\&fp-y=0.3150\&fp-z=1.0000\&w=1200\&ar=2624%3A1476)

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

![Let's upload a second image. Click on Upload Image](https://images.tango.us/workflows/6f7db358-4cb5-4edb-92e7-d3fb92149002/steps/de31b1e9-2b2f-436e-8baa-aad69eeb00dd/9e8711b1-38d0-4f3e-a52a-ee55f64e44b4.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.4394\&fp-z=2.6907\&w=1200\&ar=2624%3A1476)

#### 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

![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](https://images.tango.us/workflows/6f7db358-4cb5-4edb-92e7-d3fb92149002/steps/d0bc94f5-fc0c-4149-8cf8-cf9eb7ea50d9/9d576692-bea4-4333-9188-801500af2025.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5928\&fp-y=0.3591\&fp-z=2.2462\&w=1200\&ar=2624%3A1476)

#### 13. Click save to confirm adding the new room

![Click save to confirm adding the new room](https://images.tango.us/workflows/6f7db358-4cb5-4edb-92e7-d3fb92149002/steps/5a4db611-0723-4009-b5f4-8341f0cd9875/8d7baff3-0e27-4521-ab33-44acb9f36527.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.8818\&fp-z=1.4488\&w=1200\&ar=2624%3A1476)

#### 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.

![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.](https://images.tango.us/workflows/6f7db358-4cb5-4edb-92e7-d3fb92149002/steps/38d39f23-1cda-4846-94ac-61ddae9b2b51/7fbe8b69-2d95-4f29-87b8-adc5218e9462.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4823\&fp-y=0.3150\&fp-z=1.0000\&w=1200\&ar=2624%3A1476)

#### 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.

![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.](https://images.tango.us/workflows/6f7db358-4cb5-4edb-92e7-d3fb92149002/steps/ce3fd528-c92d-447d-93c7-a7b2f9f1aa37/1b6973d6-20fd-4bcb-ba8a-e3265c07d799.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5002\&fp-y=0.5606\&fp-z=2.7214\&w=1200\&ar=2624%3A1476)

#### 16. Select the first room by clicking on the image

![Select the first room by clicking on the image](https://images.tango.us/workflows/6f7db358-4cb5-4edb-92e7-d3fb92149002/steps/8e4360ae-fd27-41a7-b946-0644973480cf/f579d0b9-1cd5-470e-b0ca-f84d4cb4585b.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4072\&fp-y=0.4770\&fp-z=2.2462\&w=1200\&ar=2624%3A1476)

#### 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.

![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.](https://images.tango.us/workflows/6f7db358-4cb5-4edb-92e7-d3fb92149002/steps/b3655915-4b11-4f16-8a77-1661257c32da/aa1915e2-1fd6-478f-bdbe-6956bca123ab.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4998\&fp-y=0.5881\&fp-z=1.0178\&w=1200\&ar=2624%3A1476)

#### 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.

![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.](https://images.tango.us/workflows/6f7db358-4cb5-4edb-92e7-d3fb92149002/steps/c6635012-74c1-4c6d-bd74-a5cff4cf9b06/bc97a663-3df9-40e5-8b3d-da70f6554902.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.9316\&fp-y=0.2903\&fp-z=2.9891\&w=1200\&ar=2624%3A1476)

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

![Success! We published our virtual tour. Now the next time this record is loaded the new tour should be visible.](https://images.tango.us/workflows/6f7db358-4cb5-4edb-92e7-d3fb92149002/steps/95a4734c-9608-4bcd-955d-22b0750781d0/b19d5697-7ae0-4134-bec7-3670f73e6263.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.1409\&fp-z=1.6872\&w=1200\&ar=2624%3A1476)

#### 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

![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](https://images.tango.us/workflows/6f7db358-4cb5-4edb-92e7-d3fb92149002/steps/cf93550c-9a6c-42a8-b95d-17e156d0cc1f/6c0ffa8b-6a95-4e83-bf8f-870b07640ac1.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4823\&fp-y=0.3150\&fp-z=1.0000\&w=1200\&ar=2624%3A1476)

#### 21. Click on the fullscreen button

![Click on the fullscreen button](https://images.tango.us/workflows/6f7db358-4cb5-4edb-92e7-d3fb92149002/steps/3c6adf01-c570-4c7c-a7d2-c5dfa3c00b91/ff37e13f-541a-4541-9de2-789ef0e40a3a.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2624%3A1476)

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

![The fullscreen preview will take over the Salesforce screen for your users to interact.](https://images.tango.us/workflows/6f7db358-4cb5-4edb-92e7-d3fb92149002/steps/947aa9ef-b785-4d08-8ae4-2755253f17df/325462a8-a13d-4ba5-beb8-e324fa405b5b.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4487\&fp-y=0.4140\&fp-z=1.0000\&w=1200\&ar=2624%3A1476)

#### 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

![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](https://images.tango.us/workflows/6f7db358-4cb5-4edb-92e7-d3fb92149002/steps/c54224e5-c595-45e0-9290-28e42a08e28b/64726f90-6520-4da2-a194-0a9d833dd8e9.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2624%3A1476)

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

![The fullscreen dialog closes, and we're back where we started!](https://images.tango.us/workflows/6f7db358-4cb5-4edb-92e7-d3fb92149002/steps/b64d7962-9366-4dad-a31d-f177f38cfb74/7bb51f4b-dd21-49ad-8338-3dc66b9d4783.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.7500\&fp-y=0.3735\&fp-z=2.0000\&w=1200\&ar=2624%3A1476)

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

***

[_This Workflow was created with Tango._](https://app.tango.us/app/workflow/6f7db358-4cb5-4edb-92e7-d3fb92149002?utm_source=magicCopy\&utm_medium=magicCopy\&utm_campaign=workflow%20export%20links)
