Add Banner/HTML (Widget) before reply button

Dev
1

I currently use the following widget to display a banner/link after the first post of a thread. This works fine so far:

<script type="text/discourse-plugin" version="0.8">
    const { iconNode } = require("discourse-common/lib/icon-library");
    api.decorateWidget("post:after", helper => {
        const firstPost = helper.attrs.firstPost;
        const h = helper.h;
        if (firstPost) {
            return h("div#support", [
                h(
                    'a.icon', {
                        href:'link',
                        title: 'Support-Icon'
                    }, iconNode('heart')),
                h(
                    'a.link', { 
                        href: "link",
                        title: 'Support-Link'
                    }, 'some text',
                ),
            ]);
        }
    });
</script>

However, I would like to integrate the banner/link in a different place - namely before the reply button. I have marked the position in red below:

banner
banner1085×435 28.4 KB

Can anyone give me a tip on how to realise this?

I know that the position/job is defined by this. The question is how I find this NAME:LOCATION:

api.decorateWidget("NAME:LOCATION", helper => {

2

The position you marked in the picture is after all posts of the topic. So when there are replies your banner would be below these and not directly below the first post.

2 Likes
3

There is a plugin outlet there called topic-above-footer-buttons

image
image2056×200 18 KB

This helps you see them: Plugin outlet locations theme component

Then follow this guide:

4 Likes
4

Thank you. It worked.

Code example for Head:

<script type='text/x-handlebars' data-template-name='/connectors/topic-footer-main-buttons-before-create/team-support'>
	<div id="support">
		<a href="link" title="Support-Icon" class="icon">
			<svg class="fa d-icon d-icon-heart svg-icon svg-node" aria-hidden="true"><use xlink:href="#heart"></use></svg>
		</a>		
		<a href="link" title="Support-Link" class="link">text</a>
    </div>
</script>
1 Like
5

Unfortunately, the button/banner is only displayed when the user is logged in. How can I ensure that the button/banner is also displayed for non-registered users?

I’m using this theme position: topic-footer-main-buttons-before-create

6

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