> 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/3d/admin/adding-components-to-your-lightning-pages.md).

# Adding Components to your Lightning Pages

Follow this interactive guide to add components to your Salesforce Record Pages.

{% embed url="<https://app.tango.us/app/embed/898ba93f-c0ea-4cc9-a4d8-886863ed6bd0?iframe=>" %}

{% hint style="info" %}
Admin components are setting up scenes whether they are 2D or 3D and generally shouldnt be exposed to your end users.\
\
The most commonly used components for end user viewing are 3D Scene and 2D Scene, with their admin components having Director in the name
{% endhint %}

\
[Adding RenderDraw Lightning components to Screen](https://app.tango.us/app/workflow/898ba93f-c0ea-4cc9-a4d8-886863ed6bd0?utm_source=markdown\&utm_medium=markdown\&utm_campaign=workflow%20export%20links)

**Creation Date:** Jul 15, 2022\
**Created By:** Erik Pilgrim\
[View most recent version](https://app.tango.us/app/workflow/898ba93f-c0ea-4cc9-a4d8-886863ed6bd0?utm_source=markdown\&utm_medium=markdown\&utm_campaign=workflow%20export%20links)

***

#### 1. Go to the Lightning or Record Page where you have setup Metadata

#### 2. Drag the appropriate RenderDraw component

![Step 2 screenshot](https://images.tango.us/public/edited_image_f7a66be4-866b-420d-9b38-566a00dd24c0.png?crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8)

#### 3. To activate the view (if this isn't the default) Click on Activation...

![Step 3 screenshot](https://images.tango.us/public/screenshot_995eb0d3-09be-4a86-b98a-fdbf354989af.png?crop=focalpoint\&fit=crop\&fp-x=0.9093\&fp-y=0.0891\&fp-z=2.9628\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8)

#### 4. Confirm it is activated, if not, activate for the form factor needed

![Step 4 screenshot](https://images.tango.us/public/screenshot_6f951690-344f-4ab8-bc3d-6353c0c1a124.png?crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5873\&fp-z=1.2508\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8)

#### 5. Click on Close

![Step 5 screenshot](https://images.tango.us/public/screenshot_2266e8d1-d80c-430f-ab66-465fe06cb2a5.png?crop=focalpoint\&fit=crop\&fp-x=0.7874\&fp-y=0.8253\&fp-z=4.0000\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8)

#### 6. Go back, your component will be added to the page