Opening a Popup On Click

With Brave opening  popups on click is quite easy. There are 2 ways to open a popup on click.

  1. Opening the popup with a unique Link.
  2. Opening the popup with a css class or ID. (Advanced)


Opening the popup with a unique Link

To open the popup by just changing your button or link’s url, first go to your Popup’s settings screen.

Then scroll down to the Trigger section and click the “On Click” open.

popup on click

You will see a unique code like #brave_open_popup_1194 .

All you have to do is, copy this text and insert it into the url field of your button of link.

For example, if you are using the Gutenberg block editor, you can simply insert the URL in the Button Block fields url and press enter.


Opening the popup with a css class or ID

If you well versed with HTML/CSS, you can simply insert the class or ID of your button/link in Brave’s setting panel to open your popup on click.

To link a button with your popup, you need to first identify your button’s ID or class. To identify the class or ID of the button, you can use your Browser’s “Inspect Element” feature.

Just right go to the frontend of your site and open the page where the button is visible.

Right click on your button and click the “Inspect” option.

This will open up the Element Inspection mode in your browser (Available in Chrome, Edge, Safari, Firefox) and will highlight the button’s HTML code.

Inspect Element for Popup

Look for a unique class or ID (preferred) of the selected HTML element.

Note down the unique class or ID, and insert it in Brave’s “Click Element Class/ID” field.

When inserting a class, always add a dot (.) before the class name. example: .my_button_class

And when inserting an ID, always add a # before the id.  example: #myButton112

With this method, you don’t need to link your button to the popup by changing the URL like the first method. Just insert the class or ID in the class/ID field and you are good to go.