# Inject html only on one page

**URL:** https://meta.discourse.org/t/inject-html-only-on-one-page/409186
**Category:** Development
**Created:** [3 באוגוסט,‏ 2026,‏ 7:11pm UTC](https://meta.discourse.org/t/inject-html-only-on-one-page/409186 "2026-08-03T19:11:57Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Andrew\_Rowe](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/andrew_rowe/32/445877_2.png) [@Andrew\_Rowe](https://meta.discourse.org/u/Andrew_Rowe)
#### Post date: [3 באוגוסט,‏ 2026,‏ 7:11pm UTC](https://meta.discourse.org/t/inject-html-only-on-one-page/409186/1 "2026-08-03T19:11:58Z")

</div>

I have something like this in my JS tab of my theme:

```plaintext
import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("0.11.1", (api) => { 
    api.renderInOutlet("above-main-container",
        <template>
            <div>
              html stuff
            </div>
        </template>
     );
});

```

I copy pasted that, it works (just an example)

How do I make this render only on the home page or only on the categories page

sorry if this is not a good question

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [3 באוגוסט,‏ 2026,‏ 7:31pm UTC](https://meta.discourse.org/t/inject-html-only-on-one-page/409186/2 "2026-08-03T19:31:02Z")

</div>

It’s a good question, don’t worry about it! This will work:

```gjs
import Component from "@glimmer/component";
import { service } from "@ember/service";
import { apiInitializer } from "discourse/lib/api";
import { defaultHomepage } from "discourse/lib/utilities";

class HomepageOnly extends Component {
  @service router;

  get shouldShow() {
    return this.router.currentRouteName === `discovery.${defaultHomepage()}`;
  }

  <template>
    {{#if this.shouldShow}}
      <div>
        html stuff
      </div>
    {{/if}}
  </template>
}

export default apiInitializer((api) => {
  api.renderInOutlet("above-main-container", HomepageOnly);
});

```

This creates a new component, which uses the `router` service and `defaultHomepage` utility to check if you’re on the homepage. Then the component is rendered in the outlet.

There’s a little more here: [Add custom content that only appears on your homepage](https://meta.discourse.org/t/add-custom-content-that-only-appears-on-your-homepage/131415)

---

<div class="post-metadata">

### Author: ![Andrew\_Rowe](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/andrew_rowe/32/445877_2.png) [@Andrew\_Rowe](https://meta.discourse.org/u/Andrew_Rowe)
#### Post date: [3 באוגוסט,‏ 2026,‏ 7:56pm UTC](https://meta.discourse.org/t/inject-html-only-on-one-page/409186/3 "2026-08-03T19:56:07Z")

</div>

Thank you Kris, that works perfectly. Thanks for the link as well, trying to learn.

---

<div class="post-metadata">

### Author: ![Andrew\_Rowe](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/andrew_rowe/32/445877_2.png) [@Andrew\_Rowe](https://meta.discourse.org/u/Andrew_Rowe)
#### Post date: [4 באוגוסט,‏ 2026,‏ 2:48pm UTC](https://meta.discourse.org/t/inject-html-only-on-one-page/409186/4 "2026-08-04T14:48:28Z")

</div>

I have a follow on question for anybody

My little chunk of injected html makes a nice banner on my home page and it loads and works. I placed the following in the tab of my theme:

```plaintext
document.addEventListener('DOMContentLoaded', loadMyWidget);

```

It works but when I navigate away to another page then return to the home page my widget does not load again. I tried adding:

```plaintext
window.addEventListener('focus', loadMyWidget);

```

But that didn’t help, can anybody help me, should I start a new topic to ask this?

EDIT:

I think I figured it out

I added this to my export default apiInitializer((api) =\> {

```plaintext
api.onPageChange(() => {
  const myWidget = document.querySelector("#widget-container");
  if (myWidget) {
    window.loadMyWidget();
  }
 });

```

and it reloads my widget on returning to the home page

---

<div class="post-metadata">

### Author: ![Andrew\_Rowe](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/andrew_rowe/32/445877_2.png) [@Andrew\_Rowe](https://meta.discourse.org/u/Andrew_Rowe)
#### Post date: [6 באוגוסט,‏ 2026,‏ 2:49pm UTC](https://meta.discourse.org/t/inject-html-only-on-one-page/409186/5 "2026-08-06T14:49:24Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.