> 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

Adding our prebuilt, LWC components to your record pages is as easy as dragging and dropping in the lightning app builder (Edit page screen)

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