HTML Tag Selector

This is the easy way to add the copy button on the page.

Note: Prefer this option, if you have multiple pages, and want to add the copy button to all those elements. E.g. You have a code block on multiple pages then you can use this easy method.

In this documentation, we are going to see how to add the copy button with the HTML Tag Selector.

Create a Demo Page Create a Demo Page

Before adding the copy button with the CSS class selector, we need the sample demo page.

We have created the demo page with dummy content.

See the demo content and the dummy page

Great, After creating the demo page, or, checking how the demo page content looks like, let’s see how to use the HTML Tag as a selector to add the copy button.

Top ↑

Add HTML Tag selector Add HTML Tag selector

In this example, we are going to add the copy button to the List Block from the demo page.

Step 1: Add HTML Tag to the List Step 1: Add HTML Tag to the List

Visit to the demo page
Right-click on the page
and select Inspect menu

Click on Inspect element

Here, We can see the HTML tag for the list is the ul tag.

Top ↑

Step 2: Add an HTML Tag as a selector Step 2: Add an HTML Tag as a selector

To add the copy button with the HTML Tag selector, do it as:

Go to Settings > Copy to Clipboard > Add New

You’ll see the add new screen something as below:

We are going to add the text as:

Post Title: UL List
Selector: ul
NOTE: In the CSS class selector, we added the dot (.) before the class. In the CSS ID selector, we added the has (#) before the id.
But, In the HTML Tag selector, we don’t need those.
Just add the tag name like ul, p, h2, etc. The Copy button will added to all those HTML tags.)
Format: Default
Style: Button
Position: Outside
Button Text: Copy List
After Copy Button Text: List Copied!
Button Title: Copy List