This guide will show you how to capture the URL parameter and insert it into the H1 title of the page.

Step 1

Copy this code:

<script>
const insertParam = () => {
    const paramName = "NAME";
    const defaultTitle = "Default text";
    const searchParams = new URLSearchParams(window.location.search);
    const param = searchParams.get(paramName);
    const title = document.querySelector('h1');
    const dynamicText = document.querySelector('.dynamic-text');
    if (!title || !dynamicText) return;
    if (!param) {
        title.textContent = defaultTitle;
        return;
    }
    dynamicText.textContent = param;
}
insertParam();
</script>

Step 2

Insert the Custom HTML component at the bottom of the page.

Step 3

Paste the code in the editor of this component.




Within the code, you can modify the text that will be displayed in the title if there is no parameter in the URL.

Step 4

Copy this piece of code and paste it in the title, wherever you want the URL parameter to be displayed.

<span class="dynamic-text"></span>

Done!

The URL parameter will be captured and inserted to the H1 title on your page

Additional adjustments

To capture a different URL parameter instead of NAME, simply modify the code by replacing NAME with the desired parameter name.

Updated on: 28/03/2023