> 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/use-ocr-to-add-clickable-regions-to-your-2d-scenes./add-layout-areas-using-ocr.md).

# Add Layout Areas using OCR

{% embed url="<https://app.tango.us/app/embed/100eb309-2d39-45a4-9479-07a2bf87bc31>" %}

## [Adding Layout Areas using OCR Process](https://app.tango.us/app/workflow/100eb309-2d39-45a4-9479-07a2bf87bc31?utm_source=magicCopy\&utm_medium=magicCopy\&utm_campaign=workflow%20export%20links)

Creation Date: May 24, 2024Created By: Erik Pilgrim[View most recent version](https://app.tango.us/app/workflow/100eb309-2d39-45a4-9479-07a2bf87bc31?utm_source=magicCopy\&utm_medium=magicCopy\&utm_campaign=workflow%20export%20links)​

***

​

### # Navigate to a 2D Canvas with a background image added in Salesforce

#### 1. Click on Layout

![Click on Layout](https://images.tango.us/workflows/100eb309-2d39-45a4-9479-07a2bf87bc31/steps/49f84e73-8b54-44de-bdfc-a352ec10dfcc/aaba4679-21a6-477f-892c-85b66d0f9523.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1489\&fp-y=0.8140\&fp-z=1.8410\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=60\&mark-y=566\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01MzcmaD0xMjUmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)

#### 2. Click on Show menu

![Click on Show menu](https://images.tango.us/workflows/100eb309-2d39-45a4-9479-07a2bf87bc31/steps/f1590755-5a3d-4c2c-88b7-0466645aa3e0/8a07b4ed-37ef-48ea-83a3-0b21aff7c2ce.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2219\&fp-y=0.8817\&fp-z=2.9195\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=526\&mark-y=552\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xNDkmaD0xNDkmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)

#### 3. Click on Add via OCR

![Click on Add via OCR](https://images.tango.us/workflows/100eb309-2d39-45a4-9479-07a2bf87bc31/steps/cc2c8e28-3924-4631-a4ba-c4667a42bfd9/b0263a8f-caed-47a3-be29-ad873101840e.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1565\&fp-y=0.8297\&fp-z=2.1222\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=181\&mark-y=554\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00MzYmaD0xMTQmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)

#### 4. Click on Process OCR

![Click on Process OCR](https://images.tango.us/workflows/100eb309-2d39-45a4-9479-07a2bf87bc31/steps/cc624c7b-6304-433c-8b54-c33da3028104/c4f9f479-5852-4e45-8ccb-2838fb91cf92.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.8179\&fp-y=0.7784\&fp-z=4.0000\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=286\&mark-y=374\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz02MjgmaD0yMDkmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)

#### 5. Confirm the Areas, update names where required, hover over rows to see each area and remove if needed. Once completed press finish to add the areas.

![Confirm the Areas, update names where required, hover over rows to see each area and remove if needed. Once completed press finish to add the areas.](https://images.tango.us/workflows/100eb309-2d39-45a4-9479-07a2bf87bc31/steps/b7049cd9-9592-447e-9e06-b8ecb245add0/8956f5e2-eea4-442d-9f41-5c4ac39a3c1b.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.8263\&fp-z=1.0776\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=47\&mark-y=744\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTA3Jmg9NjgmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)

#### 6. Click on Close

![Click on Close](https://images.tango.us/workflows/100eb309-2d39-45a4-9479-07a2bf87bc31/steps/f015755e-0dc9-4209-ac8d-4c8f4eab0826/7435fe3b-ca44-4178-969e-472968a93e24.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.9411\&fp-y=0.0807\&fp-z=2.8191\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=927\&mark-y=144\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xNDgmaD0xNDgmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)

#### 7. Now let's add a relationship for our areas. Click on Areas

![Now let's add a relationship for our areas. Click on Areas](https://images.tango.us/workflows/100eb309-2d39-45a4-9479-07a2bf87bc31/steps/ad68114c-983b-49d3-bf31-52210571c4cb/edfdd218-69e0-454c-a75b-8f3555c3b44d.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.0862\&fp-y=0.5732\&fp-z=2.3332\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=113\&mark-y=335\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yNTYmaD0yODcmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)

#### 8. Click on an area

![Click on an area](https://images.tango.us/workflows/100eb309-2d39-45a4-9479-07a2bf87bc31/steps/beb20d50-852a-4915-b507-2deec202a538/71d34a17-76c5-472d-aac6-1cb3973ff054.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1794\&fp-y=0.6813\&fp-z=2.4253\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=359\&mark-y=434\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMjcmaD04OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)

#### 9. Link with the record by searching for Records by object and record. Objects can be set globally through the scene's environment settings > Default related objects

![Link with the record by searching for Records by object and record. Objects can be set globally through the scene's environment settings > Default related objects](https://images.tango.us/workflows/100eb309-2d39-45a4-9479-07a2bf87bc31/steps/84dc1c9d-810b-400c-bbe7-48cf614d9ab9/31fdf664-2932-4d0a-a471-c69c809f95c3.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1559\&fp-y=0.9343\&fp-z=1.8903\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=94\&mark-y=788\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01MTkmaD05OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)

#### 10. Repeat as needed