Get URL parameters from website

#1

Hello.

Let’s say I have a parent website that has an embed chatbot… And that website has some querystring params (i.e. ?params=12345). Is there a way to capture those params in the chatbot?

Thanks in advance!

(Nathan Stults) #2

The embedded chatbot does have some mechanisms to let you interact with it programmatically, so I think the answer is “maybe” - what are you trying to achieve specifically?

Thanks!

Nathan Stults
Flow XO Team

#3

Hello, I want to simply print the query string params in a message.

For example: /?params=34324

And the output in the message:

The params are: 34324.

(Nathan Stults) #4

Great, then you can do this. You need to use the Web Messenger embed API so that you can send a message from javascript. You can then extract the query params using javascript and include it in your message:

Help link: https://support.flowxo.com/article/167-web-messenger-api

And here’s how to get the search params in javascript easily: https://davidwalsh.name/query-string-javascript

<script>
  function messengerReady() {
// Wait until the messenger is fully
// ready, then send a message
var urlParams = new URLSearchParams(window.location.search);

FxoMessenger.on('stateChanged', function(state) {
  if (state === 'connected') {
    FxoMessenger.sendMessage(urlPrarams.get('myParamName'));
  }
  });
  }
</script>
<script src="https://widget.flowxo.com/embed.js?callback=messengerReady" async defer data-fxo-widget="my-own-widget-code"></script>
#5

Great, thank you very much! So, will the params will be saved as “Metadata” in my flow?

EDIT: By the way, is it possible to use this method using an iframe?

(Nathan Stults) #6

So automatically sending a message to the bot will not save the data to metadata by default - you would need a step in your flow that expected a certain message, parsed it, and used a Set Attribute step to save the data to the session.

It’s a pretty good idea though, to extend the API to set metadata through javascript, something we can consider.

Another alternative might be to expose a rest endpoint you could post data do for a given chat session. I guess the real question is what are you ultimately trying to achieve?

Good question on the iFrame. I think the answer is probably no, not out of the box - you’d need to do some fancy javascript magic.

#7

Thank you so much for your help! :slight_smile:

This is what I ended up doing:

FxoMessenger.on('stateChanged', function(state) {
            const urlParams = new URLSearchParams(window.location.search);
            const params = urlParams.get('params');
            if (state === 'connected') {
                FxoMessenger.sendMessage('Start', { // Metadata
                    params: params
                });
            }
        });

It would be awesome to have a feature in FlowXO that allows to get the querystring parameters from the parent URL in which the bot is embedded, kind of like Truchat.

Thanks again! :slight_smile:

(Nathan Stults) #8

No problem - your solution was better than mind in the end :slight_smile: I spaced the metadata object. Will add access to the query string params to our requested features list, it’s a good one.