Overview
Candu supports dynamic content loading through:
Dynamic URLs with variables - for personalizing links and content using:
User properties (e.g., {{user.name|guest}})
URL components (e.g., {{url.pathname[1]|default}})
Wildcard URLs - for targeting where content appears
Variable Types and Support
URL Variables
Pull information directly from the current URL - here's an example URL and breakdown:
https://test.candu.ai/app/integrations?openIntegrationInfoModal=true&selectedService=Salesforce
Breaks down to:
url.pathname # /app/integrations
url.pathname[1] # integrations
url.search # ?openIntegrationInfoModal=true&selectedService=Salesforce
url.search.name # undefined
url.search.openIntegrationInfoModal # true
url.search.selectedService # Salesforce
url.protocol # https:
url.hostname # test.candu.ai
url.hostname[0] # test
url.hostname[1] # candu
url.hostname[2] # ai
User Property Variables
Access user-specific information sent to Candu:
{{user.name|guest}} # User's name with "guest" fallback
{{user.region|us}} # User's region with "us" fallback
{{user.company|default}} # User's company with "default" fallback
Component Support
You can use both URL and user property variables with:
Buttons
Action Cards
Hyperlinks
iFrames
Videos (for source URLs)
Images (for source URLs)
Example for an image with URL variables:
https://assets.candu.ai/{{url.pathname[1]|default}}/header.png
Example for an iFrame with URL variables:
https://docs.candu.ai/embed?section={{url.pathname[1]|overview}}&theme={{url.search.theme|light}}
Typography Limitation
⚠️ Text content can only use variables passed as user properties. URL variables cannot be used directly in text content.
To use URL information in text, first pass it as a user property through your implementation.
Common use cases for Dynamic URLs
Directing users to certain pages/URLs in your product from CTAs
To ensure that users are directed to the appropriate sections of your product, you can leverage dynamic URLs. This allows you to replace variable parts of a URL with specific User Traits that you send to Candu (similar to Variables).
Example: Directing users to specific pages
You store data in different regions with distinct URL structures, such as eu.companyname.com for Europe and us.companyname.com for the United States. To direct users to the correct URL based on their region without creating separate content experiences:
Using user properties:
https://{{user.region|us}}.example.com
Using URL variables:
https://{{url.hostname[0]|us}}.example.com
https://{{user.region}}.companyname.com
If you want to provide a default value in case the User Trait is not available, use a pipe (|) followed by the fallback value:
https://{{user.region|us}}.companyname.com
URL-Based Variables
Candu now supports extracting and using various components of URLs through URL-based variables. This allows you to reference specific parts of URLs in your actions and content.
Available URL Variables
url.protocol: The protocol of the URL (e.g., "https:")
url.hostname: The full hostname of the URL
url.hostname[0], url.hostname[1], etc.: Individual sections of the hostname (0-indexed)
url.pathname: The current URL path
url.pathname[1], url.pathname[2], etc.: Individual sections of the path (0-indexed)
url.search: All URL search parameters (without the leading "?")
url.search.parameterName: Access specific search parameters by name
Example URL Breakdown
For the URL: https://production.canduhosted.com/app/integrations?openIntegrationInfoModal=true&selectedService=segment
url.protocol # "https:"
url.hostname # "production.canduhosted.com"
url.hostname[0] # "production"
url.hostname[1] # "canduhosted"
url.hostname[2] # "com"
url.pathname # "/app/integrations"
url.pathname[1] # "integrations"
url.search # "openIntegrationInfoModal=true&selectedService=segment"
url.search.openIntegrationInfoModal # "true"
url.search.selectedService # "segment"
Setting Up URL Variables in the Editor
Drop a component in the toolbox that supports URL variables, such as a Button, Card, iFrame, Image, or Player for videos.
Open the interactions tab in the toolbox
Select "Open URL" as the action type
Type in the variable pattern
Common Use Cases for URL-Based Variables
1. Preserving User Context
Tracks where the user came from and who they are.
2. Maintaining Search Parameters
Preserves search and filter settings across page navigation.
3. Dynamic Subdomain Navigation
https://{{url.hostname[0]|default}}.candu.ai/dashboard
Maintains the current subdomain when navigating to a new section.
Wildcard URLs
Wildcard URLs allow you to load your Candu content dynamically, depending on the page URL.
You can simply replace the variable parts of a URL with an asterisk (*), also known as a wildcard. By adding in an *, you are telling Candu that you want the URL matching to allow that part of the URL to be variable.
When replacing the 'userid' and 'org' portions of the above example URL with an , the URL will appear as follows: https://candu.ai/workspaces/*
Another example is when an application offers a different URL per customer such as: companyname.candu.ai
You can add a wildcard for this use case: *.candu.ai
Setting up Wildcard URLs
The process is the same as adding a standard URL apart from the format of the URLs entered.
Use one asterisk (*) to match one variable in a URL e.g. customername.candu.ai
Use two asterisks (**) to match more than one unique variable e.g https://candu.ai/workspaces/90/78/reports > https://candu.ai/workspaces/**/reports
Use a ? when there is one variable character
Setting up wildcards from the Placements tab
First, edit the placement URL under the interactions tab.
Then, update the placement URL type to “Wildcard” before adding a wildcard URL.
Setting up wildcards under Content Settings > Placements
Common Issues and Solutions
Variable Not Being Replaced
Issue: URL variables remain in the {{variable}} format instead of being replaced with values
Check: Verify the variable syntax is correct (double curly braces)
Check: Confirm the URL component exists in the current page URL
Solution: Add a fallback value using the pipe symbol: {{url.pathname[1]|default}}
Undefined Values
Issue: Variables return "undefined" or unexpected values
Check: Use browser dev tools to inspect the current URL structure
Check: Verify array indices for hostname/pathname (remember it's 0-based)
Solution: Log the URL components in the console to debug: console.log(window.location)
Search Parameters Not Working
Issue: Unable to access search parameters
Check: Verify the parameter exists in the URL
Check: Parameter names are case-sensitive
Solution: Use the full url.search to debug available parameters
Best Practices
Always include fallback values for production use
Test with various URL formats in staging environment
Use the variable selector dropdown when available to prevent syntax errors
Document which URL variables are used in your implementation
Testing Recommendations for Dynamic URLs
Create an 'Only Me' segment for initial testing
Test with and without search parameters
Test with different URL structures
Verify fallback values work as expected
Test across different browsers and devices
⚠️ Notes on using Dynamic Variables
Test URL variables thoroughly in a staging environment before deploying to production
Verify all fallback values work as expected when URL components are missing
Use the browser console to debug URL component values if needed
You cannot test wildcard URLs in preview mode prior to content actually being embedded. We recommend embedding content in a staging environment or creating an 'Only Me' segment for testing purposes.