XF 2.2 How to add custom html widgets ( crypto ticker and discord widget)

ACP >> Appearance >> Widgets
  1. Click Add widget at top right of Widgets page
  2. Widget definition = HTML >> click Add Widget
  3. Fill in the required data and click Save at the bottom
Hello djbaxter,

how do I know what to enter in the conditions?

Widget key (this must be a special, predefined condition? I have no idea)
Display condition (same here)

And how do I get the right code? Is there only the option of using the page source text and then modifying the code accordingly? I find this to be quite complicated for website operators who have little or no knowledge of HTML. XF should make this better and easier in the future.

All I want is to add a small block to the sidebar with a small banner. But it already fails because I don't know what the two conditions marked in bold are all about. And that I cannot find the entered source code via the "template search". So I don't even know which template to edit. This can be quite frustrating for a newbie.

Best regards!


Well-known member
The Display condition information is only needed if you want the widget to display ONLY to certain usergroups or on certain pages.

Widget key is just a unique identifier for this specific widget. Can be anything, like my_widget.

As for the HTML, can you provide a better description of the widget and what you want displayed?
Hello dj baxter,
thank you very much for your quick help. I just want the following:

1. Adding a new block to the sidebar
2. Heading: "Our partner"
3. The only content of the block should be a banner that is also linked.

That's all.

Sounds easy. But if you are as inexperienced with XF as I am, it can be quite sobering.

Best regards.


Well-known member
First you need to find out the style number for your default style;

ACP >> Appearance >> Styles & templates >> Styles >> {your default style)

Click on the style and look at the end of the link in your browser. You will see something like style.3/

the number after the period is the style number.

Now in the Display condition text box enter that number like this:

{$xf.visitor.style_id} == 3

or whatever your style number is.

Save and done.