> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://docs.helixo.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to master widget position placement?

Yeah, You can place the in-page widget wherever you want with a few simple steps.

|| **Prerequisite**
|| The following part of the article requires development knowledge. 

First thing you have to do is select a place you think, is suitable to show the offer within the page.

Right-click the element and select Inspect. **Or**

               Press `⌘ + Option + C` ( in Mac) **Or** 

               `Ctrl + Shift + C` (Windows, Linux, Chrome OS)

**Step 1**: Find its class or id to uniquely identify its position.

![](https://storage.crisp.chat/users/upload/plugin/-/c/6/1/d/c61d79638ebd5800/2e81877a-c150-8191-91a4-e252a8_1b0x5ka.png)

Here I want to place it below **photos div**

**Step 2:** Paste it's css selector in`Edit widget > widget settings > position > Inpage widget position`.

here the selector is 

```css
div.photos
```

![](https://storage.crisp.chat/users/upload/plugin/-/c/6/1/d/c61d79638ebd5800/30f1877a-c150-8088-baaa-ed6b34_17vz151.gif)

**Step 3**: Select appropriate position placement (with respect to selected block)

### There are 4 position placements available.

#### 1.Before

Places widget `Before` the selected block.

![](https://storage.crisp.chat/users/upload/plugin/-/c/6/1/d/c61d79638ebd5800/2e81877a-c150-812a-9b6e-d6ef39_wsyhqy.png)

#### 2.**After**

Places widget `After` the selected block.

![](https://storage.crisp.chat/users/upload/plugin/-/c/6/1/d/c61d79638ebd5800/2e81877a-c150-8113-aa18-f3d8ba_1lbzkk5.png)

#### 3.Prepend

Places widget as the `first element inside the selected block`

![](https://storage.crisp.chat/users/upload/plugin/-/c/6/1/d/c61d79638ebd5800/2e81877a-c150-8106-8a55-e880ef_15uxr7a.png)

#### 4.Append

Places widget as the `last element inside the selected block`

![](https://storage.crisp.chat/users/upload/plugin/-/c/6/1/d/c61d79638ebd5800/2e81877a-c150-8173-8cf7-d60bf3_1n9jz5c.png)

**In this case,** `After` **placement is the perfect one**. which placed right below the photos section.

Also, not that append and prepend not working well for this case. But may work in yours.

|| **Pro Tip!** 
|| If there is not enough space, the widget may not fit well. Try a different position and position placement until you find the best one.

Hope you've got some value from this article. Let us know your feedback 🙂  We are excited to hear your thoughts.

|| **Did we miss something?**
|| No worries! Message us by clicking the chat icon 💬  inside the app.
|| Or Just email our team at [support@helixo.co](mailto:support@helixo.co) ✌️