How to change text on webpage to name with url

Question

We're re-doing an old project from a few years ago but the pages are lost so I am rebuilding them. You can find it here: http://limoon.nl/valentijn

Customers get a balloon attached with a QR code to scan that brings them to this page. But each code has a special personalised url, example: https://limoon.nl/valentijn/?n=eric%20anderson&pla=ho

Their name will be filled into the {name} element. I have no idea to do this because an ex-colleague built this years ago. Any suggestions?

EDIT: We found the back-up so placed that and it works again!

Welcome to Stack Overflow! Visit the [help], take the [tour] to see what and [ask]. If you get stuck, post a [mcve] of your attempt, noting input and expected output using the [`[<>]`](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. — mplungjan, Jan 05 '22 at 09:17

score 0 · Answer 1 · answered Jan 05 '22 at 09:30

Likely somewhere on wordpress your need to fill in a name. It should have been replaced by the template engine on the server

If you absolutely cannot fix it otherwise, try this

Put the script below into <script></script> tags in the head of the page and uncomment (remove the leading //) from the const url = new URL(location.href) line and delete const url = new URL("https://limoon.nl/valentijn/?n=eric%20anderson&pla=ho");

String.prototype.toProperCase = function () { return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});};

window.addEventListener("load",function() {
  // uncomment next line
  // const url = new URL(location.href)
  // delete next line
  const url = new URL("https://limoon.nl/valentijn/?n=eric%20anderson&pla=ho");
  let naam = url.searchParams.get("n")
  naam = naam ? naam.toProperCase() : "";
  document.querySelectorAll('.et_pb_text_inner p strong').forEach(tag => {
    let text = tag.innerText;
    if (text.indexOf('{NAAM}') !=-1) tag.innerText = text.replace("{NAAM}",naam);
  })
})

<div class="et_pb_section et_pb_section_3 et_pb_with_background et_section_regular">
  <div class="et_pb_row et_pb_row_3">
    <div class="et_pb_column et_pb_column_4_4 et_pb_column_3  et_pb_css_mix_blend_mode_passthrough et-last-child">
      <div class="et_pb_module et_pb_text et_pb_text_0  et_pb_text_align_center et_pb_bg_layout_light">
        <div class="et_pb_text_inner">
          <p><strong>HI {NAAM},</strong></p>
        </div>
      </div>
      <div class="et_pb_module et_pb_text et_pb_text_1  et_pb_text_align_center et_pb_bg_layout_light">
        <div class="et_pb_text_inner">
          <p style="text-align: center;">Heb je mijn video al gezien?<br />Maak dan hieronder jouw keuze.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="et_pb_row et_pb_row_4 et_pb_equal_columns">
    <div class="et_pb_column et_pb_column_1_3 et_pb_column_4  et_pb_css_mix_blend_mode_passthrough">
      <div class="et_pb_module et_pb_text et_pb_text_2  et_pb_text_align_center et_pb_bg_layout_light">
        <div class="et_pb_text_inner">
          <p><strong>HET IS LIEFDE OP HET</strong><br /><strong>EERSTE GEZICHT</strong></p>
        </div>
      </div>
    </div>
  </div>
</div>

Thanks for thinking with me! We found the back-up from the previous project years ago and are using that. — Léonie, Jan 07 '22 at 07:52

How to change text on webpage to name with url

1 Answers1