Skip to main content

Dynamic variables in form fields

Updated over a week ago

Inject context, reporter info, and metadata directly into issue descriptions and text fields. No manual copy-paste. No "which browser was this again?" back-and-forth.

💡 Available on Team plan and above. Also available during your free trial.

Syntax

Wrap any variable in double curly braces: {{namespace.path}}

Example:

Input: [{{project.key}}] Bug on {{context.webPage.domain}} - {{context.browser.name}}

Result: [ACME] Bug on careers.acme.com - Chrome

Where to set up dynamic variables

Add variables to your form field mappings in: Dashboard → Website Project → Widget → Form. Variables work in any text-based field — descriptions, single-line text, and multi-line text fields.

Type {{ in any field to open the variable picker and see all available options.

After adding variables to your field mappings, submit a test ticket to verify the values resolve correctly in your integration.

Two types of variables

There are two categories of dynamic variables. They work the same way in your field mappings, but the setup and behaviour are different.

Built-in variables

These are provided by Marker.io. They cover browser, device, page, reporter, date, and environment data.

  • When you type {{ in a field mapping, built-in variables autocomplete for you.

  • They work immediately with no additional setup.

  • Anyone on your team can add these to field mappings.

Custom data variables

These reference data your application passes to Marker.io via the customData object in your snippet.

  • Custom data variables do not autocomplete, because Marker.io doesn't know your property names.

  • The variable name you type must match your snippet code exactly (case-sensitive).

  • A developer needs to set up the snippet first. Once that's done, anyone can map the fields.

See "Setting up custom data variables" below for the full setup process.

Use cases

  • Auto-routing by reporter: Include {{reporter.email}} in descriptions. Your Jira automation can route issues to the right team member based on the email.

  • Support context with custom data:

User ID: {{customData.userId}}
Plan: {{customData.account.plan}}
Company: {{customData.company.name}}

  • Timestamp for SLA tracking: Reported at: {{date.iso}} Machine-readable timestamp for automation rules and SLA calculations

  • Audit trail for compliance: Reported: {{date.iso}} by {{reporter.name}} ({{reporter.email}})

  • Environment info in custom fields: Use {{environment.multiline}} or {{environment.oneline}} in a dedicated "Environment" text field. Keeps descriptions clean while capturing full technical context.

Available variables

Reporter information

Variable

Description

Example output

{{reporter.name}}

Reporter's full name

Sarah Chen

{{reporter.email}}

Reporter's email

sarah.chen@acme.com

{{reporter.displayName}}

Name and email combined

Sarah Chen (sarah.chen@acme.com)

Issue metadata

Variable

Description

Example output

{{issue.markerId}}

Unique Marker.io issue ID

MRK-a1b2c3d4

{{project.name}}

Project name in Marker.io

ACME Careers Site

{{project.key}}

Project key

ACME

{{issueType.name}}

Selected issue type

Bug

Date and time

Variable

Description

Example output

{{date.now}}

Current date and time

Dec 18, 2024, 3:45 PM

{{date.today}}

Current date only

Dec 18, 2024

{{date.iso}}

ISO 8601 format (for integrations)

2024-12-18T15:45:30.000Z

{{date.timestamp}}

Unix timestamp

1734536730

Browser and device context

Variable

Description

Example output

{{context.browser.name}}

Browser name

Chrome

{{context.browser.version}}

Browser version

120.0.6099.109

{{context.browser.userAgent}}

Full user agent string

Mozilla/5.0...

{{context.operatingSystem.family}}

OS name

macOS

{{context.operatingSystem.version}}

OS version

14.2.1

{{context.deviceType}}

Device category

desktop

{{context.mobileDevice.model}}

Mobile device model

iPhone 15 Pro

{{context.mobileDevice.manufacturer}}

Device manufacturer

Apple

Page information

Variable

Description

Example output

{{context.webPage.url}}

Full page URL

https://careers.acme.com/jobs/123

{{context.webPage.title}}

Page title

Senior Developer - ACME Careers

{{context.webPage.domain}}

Domain only

careers.acme.com

Viewport and screen

Variable

Description

Example output

{{context.viewport.width}}

Viewport width in pixels

1440

{{context.viewport.height}}

Viewport height in pixels

900

{{context.screenSize.width}}

Screen width

2560

{{context.screenSize.height}}

Screen height

1440

{{context.screenSize.pixelRatio}}

Device pixel ratio

2

{{context.zoom.zoomFactor}}

Browser zoom level

1.25

Integrations

Variable

Description

{{context.fullStory.sessionUrl}}

FullStory session link

{{context.fullStory.sessionUrlAtCurrentTime}}

FullStory link at exact moment

{{context.logRocket.sessionUrl}}

LogRocket session link

Environment summary

Get all environment data in a single variable.

Variable

Description

Example output

{{environment.multiline}}

Multi-line format

Device type: desktop ⏎ Browser: Chrome 120 ⏎ Viewport: 1920×1080 ⏎ OS: macOS 14.2

{{environment.oneline}}

Comma-separated

Device type: desktop, Browser: Chrome 120, Viewport: 1920×1080, OS: macOS 14.2

{{environment.json}}

JSON object

{"Device type":"desktop","Browser":"Chrome 120.0.0",...}

Setting up custom data variables

Custom data variables let you pass any data from your application into Marker.io. This requires a developer to set up the snippet, and then anyone on your team can map the variables to form fields.

Step 1: Your developer adds customData to the snippet

This is a one-time setup. Your developer defines which properties to pass from your application. For example:

javascript

// Helper functions that pull data from your app
function getEnvironment() {
  return window.location.pathname.includes('/staging/') ? 'Staging' : 'Live';
}

function getCurrentPlan() {
  return 'Enterprise'; // Replace with your actual plan logic
}

window.markerConfig = {
  project: 'YOUR_PROJECT_ID',
  source: 'snippet',
  customData: {
    environment: getEnvironment(),   // e.g., "Staging" or "Live"
    currentPlan: getCurrentPlan()    // e.g., "Enterprise"
  }
};

The property names (environment, currentPlan) are defined by your team. They can be anything your app can provide: user IDs, account names, feature flags, internal build versions, etc.

For the full snippet setup, see the Custom Metadata help doc.

Step 2: Map the variables in your form field settings

Go to Dashboard > Website Project > Widget > Form and add the variables to your field mappings using the exact property names from the snippet:

  • {{customData.environment}} (matches the environment property)

  • {{customData.currentPlan}} (matches the currentPlan property)

Nested paths are also supported. If your snippet passes customData: { account: { plan: 'Enterprise' } }, reference it as {{customData.account.plan}}.

These names are case-sensitive and must match exactly. {{customData.Environment}} won't resolve if your snippet uses environment (lowercase). {{customData.environm}} won't resolve because it's a typo. Marker.io cannot autocomplete custom data property names because they're defined by your team, not by us.

Step 3: Test it

Submit a test ticket through the widget and check the field in your integration (Jira, Linear, etc.).

  • If you see the actual value (e.g., "Staging"), it's working.

  • If you see the raw placeholder text (e.g., {{customData.environment}}), the variable didn't resolve. See "Troubleshooting" below.

Available custom data variables

Variable

Description

{{customData.userId}}

Any custom property you pass

{{customData.account.plan}}

Nested paths supported

{{customData.permissions}}

Arrays and objects JSON-stringify automatically

Supported field types

Variables work in text-based fields only: description fields, single-line text fields, and multi-line text fields.

Troubleshooting

If a variable doesn't resolve, the raw placeholder text appears in your ticket. For example, if {{customData.environment}} can't be resolved, your Jira field will contain the literal text {{customData.environment}} instead of a value like "Staging".

This applies to all variables, but is most common with custom data variables because the property names are defined by your team and must be typed manually (no autocomplete).

Common reasons a variable won't resolve

Typo in the variable name. {{customData.environm}} won't match a snippet property called environment. Names are case-sensitive and must be exact.

The customData property doesn't exist in the snippet. The variable name must match a property your developer defined in the customData object. If the property isn't in the snippet, the variable can't resolve.

The snippet isn't loaded on the page. If the Marker.io snippet isn't present on the page where feedback is submitted, no custom data (or any dynamic variable data) is available.

The data is undefined at the time of capture. If your snippet references a function that returns undefined or null (for example, getCurrentPlan() before a user is authenticated), the variable won't resolve.

Plan doesn't include dynamic variables. Dynamic variables (including custom data variables) require the Team plan or above. On other plans, all {{...}} placeholders remain as literal text.

Built-in variable path doesn't exist. Unknown paths like {{context.fake.path}} are preserved unchanged. Check the variable tables above for valid paths.

How to verify

  1. Submit a test ticket through the widget.

  2. Open the ticket in your integration (Jira, Linear, etc.).

  3. Check the field where you added the variable.

  4. If the value resolved correctly (e.g., "Chrome", "Staging"), you're good.

  5. If you see raw placeholder text (e.g., {{customData.environment}}), check the list above.

Related Articles
Forms: Widget Form Configuration
Widget JavaScript SDK
Custom Metadata
How to integrate Marker.io into your web app
Snippet Configuration
Did this answer your question?