{"componentChunkName":"component---src-layouts-post-index-tsx","path":"/docs/guides/variables/","result":{"data":{"mdx":{"frontmatter":{"title":"Variables","description":"Variables are how you pass data into your page. We'll explain the variety of ways you can use them."},"slug":"docs/guides/variables","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Variables\",\n  \"description\": \"Variables are how you pass data into your page. We'll explain the variety of ways you can use them.\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar OptionsVertical = makeShortcode(\"OptionsVertical\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", {\n    \"id\": \"variable-data-and-data-types\"\n  }, \"Variable data and data-types\"), mdx(\"p\", null, \"Variables are strings. There's no additional formatting of variables, so dates and numbers need to be passed through as the final string value you'd like in the page.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Do this\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-json\"\n  }), \"{\\n  ...\\n  \\\"substitutions\\\": {\\n    \\\"num_contacts\\\": \\\"3\\\",\\n    \\\"date\\\": \\\"Feb 4 2021\\\"\\n  }\\n}\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Don't do this\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-json\"\n  }), \"{\\n  ...\\n  \\\"substitutions\\\": {\\n    \\\"num_contacts\\\": 3,\\n    \\\"date\\\": 1612403569314\\n  }\\n}\\n\")), mdx(\"p\", null, \"Values for variables are optional. Values that aren't provided are equivalent to empty strings.\"), mdx(\"h2\", {\n    \"id\": \"variable-placement\"\n  }, \"Variable placement\"), mdx(\"p\", null, \"Variables \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"can\"), \" be placed in:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Text areas within Text blocks, including:\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Table cells\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"2-column layouts\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Accordion widget\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Text\"), \" areas within Splash, Video, Embed, Quote and Accept blocks\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The link for \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://help.qwilr.com/article/735-creating-tokens-for-images-maps-videos-and-buttons\"\n  }), \"Image, Video, Button and Map widgets\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The source for the \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://help.qwilr.com/article/826-using-the-embed-widget\"\n  }), \"Embed widget\"))), mdx(\"p\", null, \"At this time, variables \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"cannot\"), \" be placed in:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Configuration\"), \" areas for blocks, e.g.:\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Foldable block button text (default text is \\\"show/hide\\\" \\u2014 though see the \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/api-reference/#pages/create-a-page\"\n  }), mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"blocks > foldable\")), \" options)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Custom Accept text for the Accept block\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Custom forms for the Accept block\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The link for Splash, Video and Embed blocks (however there's separate \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/api-reference/#pages/create-a-page\"\n  }), mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"blocks > splashSettings\")), \" for the Splash block image or video)\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Within the product line items of a Quote block (use the \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/api-reference/#pages/create-a-page\"\n  }), mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"blocks > quoteSettings\")), \" instead)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Accept button itself\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"In place of an Accordion widget banner image\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The link for text links\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"ROI calculator widget\")), mdx(\"h2\", {\n    \"id\": \"account-variables\"\n  }, \"Account Variables\"), mdx(\"p\", null, \"Account variables are created and managed \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://help.qwilr.com/article/730-personalizing-qwilr-pages-with-tokens\"\n  }), \"within Qwilr\"), \".\"), mdx(\"p\", null, \"For each account variable, select the \", mdx(OptionsVertical, {\n    mdxType: \"OptionsVertical\"\n  }), \" to get the API reference. The API reference is the key that should be used to specify the variable in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"substitutions\"), \" request object.\"), mdx(\"h2\", {\n    \"id\": \"variables-for-buttons\"\n  }, \"Variables for Buttons\"), mdx(\"p\", null, \"Variables can be used to specify the destination URL for a button link in a page create request. We do not currently support account variables in the button text.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Your responsibilities:\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The supplied variable value is a valid URL\")), mdx(\"h2\", {\n    \"id\": \"variables-for-images\"\n  }, \"Variables for Images\"), mdx(\"p\", null, \"Variables can be used for placing media within text areas. The inline image widget expects a string for the path of the image or video, either owned by you, or uploaded to our image library.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Your responsibilities:\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Ensure the image path is correct\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Ensure the image is publicly available to the Internet, so that people viewing your page can see the image\")), mdx(\"h2\", {\n    \"id\": \"variables-for-videos\"\n  }, \"Variables for Videos\"), mdx(\"p\", null, \"Variables can be used to determine which video is loaded into a video embed.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Your responsibilities:\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Ensure your video is on a supported video service \\u2014 YouTube, Brightcove or Loom \\u2014 and that this video is publicly available to the Internet, so that people viewing your page can see the video.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"For YouTube, Wistia and Brightcove, the video variable expects the URL from the \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"embed code\"), \" provided by the platform, not the entire blob of embed HTML\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Vimeo isn't supported: unfortunately, Vimeo don't provide embed code that includes a usable URL\")), mdx(\"h2\", {\n    \"id\": \"variables-for-maps\"\n  }, \"Variables for Maps\"), mdx(\"p\", null, \"Variables can be used to control the focus of the map widget. Using the \\\"Share\\\" and \\\"Embed a map\\\" option in Google Maps, copy the URL from within the embed HTML to use as the map link.\"), mdx(\"h2\", {\n    \"id\": \"repeating-variables\"\n  }, \"Repeating Variables\"), mdx(\"p\", null, \"Repeating variables are a type of variable that can be used in conjunction with the Repeating Content widget and Repeating Table Rows in the Table widget. They allow for the rendering of an array of objects with multiple string properties. This results in a templated set of content that repeats \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"within\"), \" a block.\"), mdx(\"p\", null, \"Repeating variables can have one or more \\\"Item Properties\\\". Within a repeating section of content, you can reference one repeating variable, along with its properties, and any number of non-repeating variables.\"), mdx(\"p\", null, \"In the following examples we're rendering a repeating variable named \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"contact\"), \", with two properties \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"name\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"location\"), \". The content can be repeated any number of times based on the data provided for the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"contact\"), \" variable, in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"substitutions\"), \" section of the API request.\"), mdx(\"h3\", {\n    \"id\": \"repeating-variables-setup\"\n  }, \"Repeating Variables setup\"), mdx(\"p\", null, \"The variables menu for the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"contact\"), \" repeating variable looks something like this:\\n\", mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/assets/images/repeating-token-menu.png\",\n    \"alt\": \"Repeating variable menu\"\n  })), \"\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"contact\"), \" has two item properties: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"name\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"location\"), \". You can get the API reference of an item property by hovering and selecting \", mdx(OptionsVertical, {\n    mdxType: \"OptionsVertical\"\n  }), \".\"), mdx(\"h3\", {\n    \"id\": \"repeating-content-widget\"\n  }, \"Repeating Content widget\"), mdx(\"p\", null, \"The diagram below illustrates how you go from a Repeating Content widget with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"contact\"), \" selected, to what is rendered after an API request:\\n\", mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/assets/images/diagram-content-loop.png\",\n    \"alt\": \"Repeating content in the editor, and the output result showing a list of contacts\"\n  }))), mdx(\"p\", null, \"The Repeating Content widget also supports \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://help.qwilr.com/article/321-the-qwilr-editor#list\"\n  }), \"ordered and unordered lists\"), \".\"), mdx(\"h3\", {\n    \"id\": \"repeating-table-rows\"\n  }, \"Repeating Table Rows\"), mdx(\"p\", null, \"Similar to the above example, you can select \\\"Repeating Row\\\" when adding new rows to a table widget and get something similar to the following:\\n\", mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/assets/images/diagram-repeating-row.png\",\n    \"alt\": \"Repeating row with variables in the editor, and the output result showing a list of contacts\"\n  }))), mdx(\"h3\", {\n    \"id\": \"sample-request\"\n  }, \"Sample request\"), mdx(\"p\", null, \"The API request for the above examples would contain a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"substitutions\"), \" section similar to:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-json\"\n  }), \"{\\n  ...\\n  \\\"substitutions\\\": {\\n    \\\"contact\\\": [\\n      {\\n        \\\"name\\\": \\\"Allison Reynolds\\\",\\n        \\\"location\\\": \\\"Shermet, IL\\\",\\n        \\\"image\\\": \\\"path/to/image\\\"\\n      },\\n      {\\n        \\\"name\\\": \\\"Mechagodzilla\\\",\\n        \\\"location\\\": \\\"Tokyo, Japan\\\",\\n        \\\"image\\\": \\\"path/to/image\\\"\\n      },\\n      {\\n        \\\"name\\\": \\\"Boba Fett\\\",\\n        \\\"location\\\": \\\"Kamino\\\",\\n        \\\"image\\\": \\\"path/to/image\\\"\\n      }\\n    ]\\n  }\\n}\\n\")), mdx(\"hr\", null), mdx(\"h2\", {\n    \"id\": \"note-on-crm-variables\"\n  }, \"Note on CRM Variables\"), mdx(\"p\", null, \"CRM variables automatically map existing data in a CRM to variables in Qwilr. They're intended for creating Qwilr pages from within a CRM, such as \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://help.qwilr.com/article/119-salesforce\"\n  }), \"SalesForce\"), \". The variables are created at the time of connecting a CRM integration to Qwilr and are generated from the CRM objects and modules supported by the integration.\"), mdx(\"p\", null, \"Referencing CRM variables through the API is at present an experimental feature \\u2014 please reach out to your Qwilr AE should you wish to base your API integration on CRM variables.\"));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#variable-data-and-data-types","title":"Variable data and data-types"},{"url":"#variable-placement","title":"Variable placement"},{"url":"#account-variables","title":"Account Variables"},{"url":"#variables-for-buttons","title":"Variables for Buttons"},{"url":"#variables-for-images","title":"Variables for Images"},{"url":"#variables-for-videos","title":"Variables for Videos"},{"url":"#variables-for-maps","title":"Variables for Maps"},{"url":"#repeating-variables","title":"Repeating Variables","items":[{"url":"#repeating-variables-setup","title":"Repeating Variables setup"},{"url":"#repeating-content-widget","title":"Repeating Content widget"},{"url":"#repeating-table-rows","title":"Repeating Table Rows"},{"url":"#sample-request","title":"Sample request"}]},{"url":"#note-on-crm-variables","title":"Note on CRM Variables"}]},"parent":{"__typename":"File","mtime":"2026-06-03T03:56:11.395Z"}},"allSidebarYaml":{"nodes":[{"label":"Docs","categories":[{"label":"Getting started","pages":["Quick start","API concepts","Development cycle"]},{"label":"Guides","pages":["Variables","Quote data lifecycle","Example sequence diagrams"]}]}]}},"pageContext":{"slug":"/docs/guides/variables/","category":"docs","prevPost":{"title":"Development cycle","category":"docs","group":"getting-started","url":"/docs/getting-started/development-cycle/"},"nextPost":{"title":"Quote data lifecycle","category":"docs","group":"guides","url":"/docs/guides/quote-data-lifecycle/"}}},"staticQueryHashes":["1626013524","2744294623","2744294623","3073130945","3073130945","3228045998","3228045998"]}