### Author:  [@DigitalStartup](https://meta.discourse.org/u/DigitalStartup)
#### Post date: [July 16, 2019, 12:28pm UTC](https://meta.discourse.org/t/how-to-add-customer-html-after-post-1/123068/1 "2019-07-16T12:28:00Z")
I’d like to add a customer banner (for affiliate purposes) inside of my Posts. **Specifically** , I’d like to add this block of (example) HTML right after `
```
Therefore, looking something like this:
I’ve had limited success with CSS `:after`. And so was wondering if this is something that could be done from inside the `` using a `
```
to the header section of your theme. That should be enough to add “test text” below every post.
Let’s breakdown the script above
`api.decorateWidget("post:after", helper => {`
calls the decorateWidget method, the target widget being `post` and the target location being `after`. So after a post widget.
`helper` is a built in helper that gives you access to a bunch of stuff that I will explain later
`return helper.h("div", "test text")`
This is the desired additional markup you want to add. You might notice that there’s no html in there and that’s because discourse widgets emit virtual nodes and not raw html.
Explaining what virtual nodes are or how the syntax works is outside of the scope for this topic, so I’ll skip that. I’ve added a note to write a howto for authoring virtual nodes but here are a couple of example for now
`helper.h("div", "test text")`
renders
```plaintext
test text
```
and
```plaintext
return helper.h("div#custom-ad", [
helper.h(
"a.custom-ad-link",
{ href: "example.com" },
helper.h("img", { src: "https://picsum.photos/id/74/750/90" })
)
]);
```
will render
```plaintext
```
In a nutshell, a node looks like this
```plaintext
helper.h(selector, {properties}, children)
```
I’ll explain this more in the virtual node howto.
So, now you have the nodes ready, you would just need to add the whole script to the header section of your theme, so something like this
```plaintext
```
However, there’s still a problem here, the ad will be inserted below every post in the stream, which is not ideal.
This is where the helper comes in handy, the post attributes are passed to the helper, so you can do a quick
```plaintext
console.log(helper)
```
You’ll be able to see all the post attributes available for you to work with.
those are just examples, there’s more in there.
Luckily, the `firstPost` attribute is available for us here, so all you have left is to feed that into a conditional that will only render the ad markup if it’s indeed the first post, otherwise nothing happens. So something like this:
```plaintext
```
and that will insert your ad only after the first post. One additional thing to do here is to add a height to the image, otherwise it will cause jitter as it loads. So like I briefly touched on above, the `height` attribute for the image tag is a property, so you’re need to add it next to the `src`
With all of that put together, here’s the final code for what you’re trying to achieve
```plaintext
```
One last note I want to highlight is that you can actually use raw html if virtual nodes prove to be to tricky, but it’s not recommended and it’s much better to use virtual nodes. So the same script with raw html would like like this
```plaintext
```
but again, this is not recommended.
---
### Author:  [@DigitalStartup](https://meta.discourse.org/u/DigitalStartup)
#### Post date: [July 16, 2019, 2:15pm UTC](https://meta.discourse.org/t/how-to-add-customer-html-after-post-1/123068/3 "2019-07-16T14:15:36Z")
I always appreciate the solutions that explain how to get from A-Z rather than just an answer. Thank you.
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [July 16, 2019, 4:04pm UTC](https://meta.discourse.org/t/how-to-add-customer-html-after-post-1/123068/4 "2019-07-16T16:04:19Z")
I _liked_ this post, but I just want to add: This is a fanatic explanation. I really appreciate posts like this.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [July 17, 2019, 12:04am UTC](https://meta.discourse.org/t/how-to-add-customer-html-after-post-1/123068/5 "2019-07-17T00:04:51Z")
That’s because @johani is 🔥 🌶 💪
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [August 16, 2019, 12:04am UTC](https://meta.discourse.org/t/how-to-add-customer-html-after-post-1/123068/6 "2019-08-16T00:04:54Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.