https://discord.gg/botpress logo
Join Discord
Powered by
WebChat v2: Update User Data with query url params...
# 📖tutorials
w
Here is a tutorial on a possible way to collect the page URL, browser language, and query parameters. ### Code - In your bot, you can use the [Integration Workflow Webchat Data](https://studio.botpress.cloud/?install=hsk-79ed899e8f) - In your HTML page, you can use the [js code in this JsFiddle](https://jsfiddle.net/Zannax_Botpress/3jvudcf6/) ### Bot Localization - You can search the 
session.webchatData.segments[]
or 
workflow.WebchatData1.segments
to find the language - You can use 
session.webchatData.params
or 
workflow.WebchatData1.params
, followed by 
.
and the name of the query parameter that contains the language. - Use the default browser language from 
session.webchatData.language
### Trace Campains Using 
session.webchatData.params
, you can access query URL campaign data, e.g.:
Copy code
session.webchatData.params.utm_id
session.webchatData.params.utm_source
session.webchatData.params.utm_medium
session.webchatData.params.utm_campaign
...
## Example
Copy code
js
/* session.webchatData */
{
  origin: 'https://botpress.com/docs?par=abcd&num=123#pippo',
  language: 'en-US',  // should be 2 chars or five chars language code
  referrer: 'https://botpress.com/docs',  // it may be empty
  params: {
    par: 'abc',
    num: '123'
  },
  segments: [
    'docs',
    'botpress.com',
    '#pippo'
  ]
}
## Update **2024.10.23**: https://discord.com/channels/1108396290624213082/1294770912155013163/1298600348952297577 https://cdn.discordapp.com/attachments/1294770912155013163/1294770912654004335/Webchat_Data.png?ex=671a10a1&is=6718bf21&hm=2351b9857fa4dbf33651b9e802b3c7a9b125283567f5c1867b27c72be3ca1ff1&
I've updated Card now return a property 
segments
containing the url segments, domain and fragment, if the url is eg: https://botpress.com/docs/?par=abcd&num=123#pippo
Copy code
ts
[
  'docs',
  'botpress.com',
  '#pippo'
]
w
Super useful! I made it work but it only worked one time, then it keeps showing "Not set". Any ideas of what is happening or how to fix it?
w
Hi, when is the second time to check? - After the user resets the conversation? - When checking the variable 
session.webchatData
in the same workflow during the conversation? - When checking the variable in another workflow?
w
When a second user uses it. I opened an incognito window with the url parameters, it captured them. Closed it and redone it then it showed "Not Set". The browser is capturing the parameters I can see them in the console but can't pass them in botpress. Related to you integration, once I install it should I have ant workflow automatically created like the one you show at the bottom of your instructions? Thank you so much for your help! https://cdn.discordapp.com/attachments/1294770912155013163/1296105570188656722/image.png?ex=671113e0&is=670fc260&hm=a488555e58d093328d97ccf94d3e4a6c389fc16695909946f924cdfb313fd513&
w
> Related to you integration, once I install it should I have ant workflow automatically created like the one you show at the bottom of your instructions? > Thank you so much for your help! the image in integration popup is a scrennshot of mine workflow. When you install workflows from the hub, they are added to the cards under the Hub group https://cdn.discordapp.com/attachments/1294770912155013163/1296107667848171530/image.png?ex=671115d4&is=670fc454&hm=2b962ba24e15d8f8760029757b4cc709a3b26daf3ff5f66ee027d4f4e3aa3b77&
> When a second user uses it. I opened an incognito window with the url parameters, it captured them. Closed it and redone it then it showed "Not Set". > The browser is capturing the parameters I can see them in the console but can't pass them in botpress. That's strange; that's how I tested the changes to the query string.
w
Okey! This is my current workflow. My html script code: " function getUrlData() { const urlParams = new URLSearchParams(window.location.search); return { origin: window.location.href, language: navigator.language, referrer: document.referrer, opcion1: urlParams.get('opcion1') || 'Not set', opcion9: urlParams.get('opcion9') || 'Not set' }; } window.botpress.on("webchat:ready", (conversationId) => { const urlData = getUrlData(); botpress.updateUser({ data: urlData, }); console.log("webchat:ready", botpress.user); // Send a proactive message to trigger the bot botpress.sendMessage({ type: 'text', text: 'start', metadata: urlData }); }); window.addEventListener("load", function () { const urlData = getUrlData(); botpress.updateUser({ data: urlData, }); console.log("onload", botpress.user); }); " https://cdn.discordapp.com/attachments/1294770912155013163/1296114298606719129/image.png?ex=67111c01&is=670fca81&hm=879217321d2ec55d784258a66b145ac6904bfe51e05a371f948eef872b3c2ce2&
My execute code card: / Log the entire event object and webchat data bp.logger.info('Entire event object:', event) bp.logger.info('Webchat data:', event.payload) // Function to get parameters from various sources function getParam(paramName) { return event.payload?.data?.[paramName] || event.payload?.metadata?.[paramName] || 'Not set'; } // Capture parameters const opcion1 = getParam('opcion1'); const opcion9 = getParam('opcion9'); // Save parameters to session variables session.opcion1 = opcion1; session.opcion9 = opcion9; // Log the captured values bp.logger.info('Captured parameters:', { opcion1, opcion9 }) // If parameters are not set, log a warning if (opcion1 === 'Not set' || opcion9 === 'Not set') { bp.logger.warn('One or more parameters were not set. URL used:', event.payload?.data?.origin || 'URL not available') } The text node so see if the params are fetch: Hello! Captured parameters: opcion1: {{session.opcion1}} opcion9: {{session.opcion9}} In my case I'm trying to fetch the parameters named opcion1 and opcion9, from the url that looks like this. www.mysite.com?opcion1=google&opcion9=direct
Can you share or export a botpress file example and the html code to test it? Thank again for answering! This is a must on botpress and should be easier to implement..
w
my card already does it, in a card Text or Log write 
{{session.webchatData}}
you find a 
session.webchatData.params
set to:
Copy code
ts
{
   opcion1: 'google',
   opcion9: 'direct'
}
to the value of the opcion1: 
session.webchatData.params.option1
w
So I don't need to add the execute code? Only leave the html code plus your integration?
w
yes, it should be
w
Let me test it! Thank you
w
you can pass others fields, my integration add them to 
session.webchatData
w
It worked! Thank you so much for this work and your help
Really really useful
w
I added a custom event that is triggered in the following scenarios: - When a new user lands on the page and chats for the first time - When a user changes pages on the site - When a user resets the conversation The integration workflow must be connected to a custom trigger with the filter set to 
event.type === 'zx:urlDataChanged'
. Please see the image for reference. I also updated the [JavaScript](https://jsfiddle.net/Zannax_Botpress/3jvudcf6/) because, especially in WordPress, the 
webchat:ready
event doesn't trigger or results in an error. https://cdn.discordapp.com/attachments/1294770912155013163/1298600349564928020/image.png?ex=671a2752&is=6718d5d2&hm=b8813cc46658140e631c47be1d10407e4b7482cb50aa5994f4388ef272d39e74&
4 Views
PreviousNext
Powered by