diff --git a/apps/docs/docs/editor/variables.mdx b/apps/docs/docs/editor/variables.mdx index f7f192f72..3acaa7f98 100644 --- a/apps/docs/docs/editor/variables.mdx +++ b/apps/docs/docs/editor/variables.mdx @@ -20,11 +20,19 @@ Here is a quick video that showcases advanced concepts about variables: By default, any declared variables in the bot can be prefilled by passing initial values in the URL. -Let's say I have a variable named "Email" somewhere in my bot. This variable can be passed as a URL parameter. If I'm launching my bot using this URL: +Let's say my typebot contains these variables: -`https://typebot.io/my-bot?Email=test@test.com` +- "Email" +- "First name" -Then if an input step is saving the answer into this variable, it will be first prefilled with this initial value. It can greatly improve the user experience if you already have data about him. +They can be initialized in the URL as [URL parameters](https://www.semrush.com/blog/url-parameters/). If I'm launching my bot using this URL: + +`https://typebot.io/my-bot?Email=test@test.com&First%20name=John` (Note that spaces in variable names should be replaced by `%20`) + +Then the variables will be prefilled as following: + +- Email => test@test.com +- First name => John Prefilling variables using the embed library is even easier. You need to add an object named `hiddenVariables` that contains a dictionary of your values. For example: @@ -32,18 +40,19 @@ Prefilling variables using the embed library is even easier. You need to add an Typebot.initBubble({ url: `https://viewer.typebot.io/typebot-support`, hiddenVariables: { - 'User ID': '123', - 'First name': 'John', Email: 'test@test.com', + 'First name': 'John', }, }) ``` +(Note that if your variable name contains spaces, it needs to be surrounded by quotes.) + ### Hidden variables -These are simply variables that are declared in the bot flow but aren't displayed to the user anywhere. This allows you to add some context to a session for example a User ID, a `utm_source` parameter (in the case of a marketing campaign), or anything else. +Your typebot's variables don't have to be displayed to the user. You could create variables that are only used internally by the bot and displayed in your results. This allows you to add some context to a session for example a User ID, a `utm_source` parameter (in the case of a marketing campaign), or anything else. -To enable this, you just have to make sure that the variables exist in the variables dropdown: +You just have to make sure that the variables exist in the variables dropdown: Iframe preview diff --git a/apps/docs/docs/embed/html-javascript.md b/apps/docs/docs/embed/html-javascript.md index 45868d93f..61d2f5221 100644 --- a/apps/docs/docs/embed/html-javascript.md +++ b/apps/docs/docs/embed/html-javascript.md @@ -128,12 +128,12 @@ You can add hidden variable values in your embed code by adding the `hiddenVaria Typebot.initContainer('typebot-container', { url: 'https://viewer.typebot.io/my-typebot', hiddenVariables: { - 'Current URL': window.location.href, + 'Current URL': 'https://my-site/account', 'User name': 'John Doe', }, }) ``` -It will populate the `Current URL` variable with the parent URL and the `User name` variable with "John Doe". +It will prefill the `Current URL` variable with "https://my-site/account" and the `User name` variable with "John Doe". More info about variables: [here](/editor/variables). -Note that if your site URL contains query params (i.e. https://typebot.io?name=John), the variables will automatically be injected to the typebot. So you don't need to manually transfer query params to the bot embed configuration. +Note that if your site URL contains query params (i.e. https://typebot.io?User%20name=John%20Doe), the variables will automatically be injected to the typebot. So you don't need to manually transfer query params to the bot embed configuration.