WebAR Birthday invite


#1

So today’s my birthday :partying_face:

And I planned to celebrate last saturday with some drinks, made this invite and everything! Then we all had to isolate…

NB: I’ve intentionally disabled the buttons - I don’t really want my contact information out on the forums

So to make use of it all, I thought I’d walk you all through a few things I did. As it is it’s a little impersonal, right? So clearly we need to do some level of personalisation

To get around that WITHOUT having to make a project for every person I want to invite, I’m using query strings

parent.one('ready',()=>
{
     Z.after(100,()=>
     {
          if(!!Z.device.queryStringParameter('nm'))
          {
               qName = Z.device.queryStringParameter('nm')[0];
          }
          else
          {
               qName = 'you';
          };

     setText(qName);
     });
});

function setText(name:string)
{
     parent.text(`OI, ${name.toLocaleUpperCase()}!`);
};

This is attached to the title text node and will run when the text node is first created. In this case the query string ‘nm’ gets appended to the URL as so:

?zid=z/LMRo1c&toolbar=0?nm=Chris
NB: this won’t work at the moment, for reasons I’m going to go into. Additionally the first query string is declared with a ?=[name], and all subsequent querystrings are declared with &=

Having the recipient’s name in the experience is a nice touch, but it being visible in the URL looks a little unprofessional, right?

To get around this we need to look at atob and btoa to encode the string. Given that we’re not launching this code from another project, we’re more interested in decoding - so we’ll be using Z.atob for this.

     if(!!Z.device.queryStringParameter('nm'))
     {
          qName = Z.device.queryStringParameter('nm')[0];
          qName = Z.atob(qName); //decodes parameter from Base64
     }
     else
     {
          qName = 'you';
     }

So now all we need to do is encode the name as part of the query string.
I used Base64Encode.org but other providers are available.
Running the chosen string through that site gives us the encoded string of:

Q2hyaXM=

Now, there’s a slight problem with this - equals signs are used as part of URI components to dictate a query, so to include this as a usable string we need to encode this one more time - this time using encodeURIComponent - though much like the first time, we merely need to decode inside the experience.

     if(!!Z.device.queryStringParameter('nm'))
     {
          qName = Z.device.queryStringParameter('nm')[0];
          qName = decodeURIComponent(qname);
          qName = Z.atob(qName);
     }
     else
     {
          qName = 'you';
     }

And to set this up, all we need to do is swap out the = in the encoded string for the encoded equivalent of ‘%3D’

Here’s the same experience with this query string piped in

Any questions, feel free to let me know. It’s not like I can go anywhere :sweat_smile:


queryStringParameter returning undefined in WebAR
#2

Happy birthday Chris!