> For the complete documentation index, see [llms.txt](https://docs.renderdraw.us/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.renderdraw.us/usage-scenarios/use-cases/2d/2d-admin-guide-clicks-not-code/adding-draggable-items-to-a-scene.md).

# Adding Draggable Items to a Scene

For an interactive preview, click through below

{% embed url="<https://app.tango.us/app/workflow/Create-Draggable-Item-Templates-60f752c179be46558568b0b1da50c079>" %}

Otherwise, follow along here:

## [Create Draggable Item Templates](https://app.tango.us/app/workflow/60f752c1-79be-4655-8568-b0b1da50c079?utm_source=magicCopy\&utm_medium=magicCopy\&utm_campaign=workflow%20export%20links)

#### 1. Click on Draggable Item Template

![Click on Draggable Item Template](https://images.tango.us/public/screenshot_3e34d7f0-4494-4b84-bc60-f7ee2bd873cf.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1376\&fp-y=0.7172\&fp-z=1.8949\&w=1200\&ar=3456%3A1998)

#### 2. Click on Add Draggable Item Templates

![Click on Add Draggable Item Templates](https://images.tango.us/public/screenshot_073f53bf-50aa-494a-82e1-300aa0a91695.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1376\&fp-y=0.9309\&fp-z=2.3386\&w=1200\&ar=3456%3A1998)

#### 3. Click on \*Name

![Click on \*Name](https://images.tango.us/public/screenshot_87ebf9d4-0a1c-47f0-8429-2d4acd7fd5bb.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2080\&fp-y=0.3253\&fp-z=1.8297\&w=1200\&ar=3456%3A1998)

#### 4. Review the Draggable Item Template create

At a minimum, we need a name, label, height and width, and background image. Optionally, you can relate this to Salesforce records and allow the removal of this item by using the context menu (right-click remove)

![Review the Draggable Item Template create](https://images.tango.us/public/screenshot_551cec24-a065-4381-a109-d8bbf3fbd543.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=3456%3A1998)

#### 5. Add a name for reference later

![Add a name for reference later](https://images.tango.us/public/screenshot_d6d121b7-223a-41ab-a917-1d76e7879b06.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2080\&fp-y=0.3253\&fp-z=1.8297\&w=1200\&ar=3456%3A1998)

#### 6. Add a Label for the item within the Draggable Item list

![Add a Label for the item within the Draggable Item list](https://images.tango.us/public/screenshot_bbc079ec-5fbc-4224-94fe-13f0a9f10912.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4685\&fp-y=0.3253\&fp-z=1.8297\&w=1200\&ar=3456%3A1998)

#### 7. Paste "<https://storage.googleapis.com/files.renderdraw.us/public/images/pro/retail/juulBlushGold.png>" into input

![Paste "https://storage.googleapis.com/files.renderdraw.us/public/images/pro/retail/juulBlushGold.png" into input](https://images.tango.us/public/screenshot_410fc197-4186-46d0-b0e0-a15f3f0a1bef.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3383\&fp-y=0.4054\&fp-z=1.2392\&w=1200\&ar=3456%3A1998)

#### 8. Click on dialog

#### 9. Check Allow Removal if this should be allowed to be removed.

Remember, this is removed through the context menu (when a user right-clicks)

![Check Allow Removal if this should be allowed to be removed.](https://images.tango.us/public/screenshot_c9859dd4-e939-4552-9a39-d50f6833d254.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.0845\&fp-y=0.4344\&fp-z=3.3222\&w=1200\&ar=3456%3A1998)

#### 10. Click on Update Draggable Item to Save

After updating the template, ensure you save your Scene settings

![Click on Update Draggable Item to Save](https://images.tango.us/public/edited_image_09d75aff-3d63-4dda-b355-18b0b7da0cc4.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=931%3A438)

***