Problems with adding HTML via theme component

Support
1

when i paste the code the widget shows up on the main page of the website. how can i make it show up in one of the site categories/pages not main page?

3

Hi there, could you send a screenshot or a screen recording of the problem?
Thanks!

2 Likes
4

IMG_3726
IMG_37261920×1440 64.3 KB

If I put the code in the head it shows up in the main page on top. The body lets it show up in the main page at the bottom. How can I make the widget show up in another page away from the main page? Thanks

5

Hi @Issa_George. I’d recommend working through the tutorial here to get familiar with the concepts and techniques needed for theme development. It covers how to render content in various places throughout the UI:

5 Likes
6

And you’ll find theme development much easier with the discourse_theme cli.

1 Like
7

Like what David said, you should follow that tutorial to learn how to build a component that can be rendered in various places, specifically, plugin outlets, which are dotted around the site to provide places where you can render the component.

You can place the code inside the ‘JS’ tab and pair it with api.renderInOutlet() and a <template> tag.

1 Like
8

Hi Nate, I am still struggling with this. I just want to put the html widget code inside a category section instead of main page. I read the guide but it is not clear to me what I should use. I installed CLI and the code I put doesn’t do anything on my site. I then went to the theme creator site and my code doesn’t show up in the preview. The sample code from the guide works and I can see the colored changes when I put the code.

9

Hi there, could you share the current code that you are using? Thanks!

1 Like
10

I am using CLI with git bash. I just want the widget inside this page NFL Memes - NFL

The code for the body tag is:

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function () {
    if (window.location.pathname.startsWith("/c/nfl-memes/20")) {
      const widgetContainer = document.createElement("div");
      widgetContainer.innerHTML = `
        <div class="tagembed-widget" style="width:100%;height:100%" data-widget-id="2170469" data-tags="false" view-url="https://widget.tagembed.com/2170469"></div>
        <script src="https://widget.tagembed.com/embed.min.js" type="text/javascript"><\/script>
      `;
      document.querySelector(".container").appendChild(widgetContainer);
    }
  });
</script>

The code for the head tag:

<script src="https://widget.tagembed.com/embed.min.js" type="text/javascript"></script>

The code in the widget-injector.js.es6 is:

import { withPluginApi } from "discourse/lib/plugin-api";

export default {
  name: "tagembed-widget",

  initialize() {
    withPluginApi("0.8", (api) => {
      api.renderInOutlet("below-site-header", "tagembed-widget");
    });
  }
};

The code in tagembed-widget.hbs is:

{{#if (eq category.id 20)}}
  <div class="tagembed-widget"
       style="width:100%;height:100%"
       data-widget-id="2170469"
       data-tags="false"
       view-url="https://widget.tagembed.com/2170469">
  </div>
{{/if}}
12

You should use a plugin outlet and a glimmer component. Have a look at the recent guides for theme development.