How can I create a name prompt before page loads and add its content to iframe src on the same page?

Question

I have this page on my website: https://www.lior.vip/chat

When this page loads, there is an iframe in the center of the page that runs video chat system that works like zoom.

Before the page loads, I want a popup to appear that asks the user to enter his name with two buttons: "ok / continue without name"

When user enters his name and hits "ok", I want this name to be added to the iframe src.

For example, if the iframe src is: "https://www.videoconf.com/room1" I want the source to be: "https://www.videoconf.com/room1/displayName=what user entered at name prompt.

And if user hitted "continue without name", I want the iframe src stay the regular (https://www.videoconf.com/room1).

How can I do it?

Answer 1

The most simple way is use prompt comand. For example, you can write this code right after body tag in your page.

<script>
    let displayName = "";
    const namePrompt = prompt("If you want to enter anonymous you can click 'Cancel' button, else insert your name here:");
    if (namePrompt !== null) {
         displayName = "/displayName="+namePrompt;
    }
    document.getElementById("Iframe Id").src = "your url source"+displayName;
</script>

If you prefer you can create dinamically a popup window with javascript. Or put the code inside a function and get the name as return value.