Create CSS and JavaScript Tokens in QCDR

QCDR 1.1.05 includes current CSS and JavaScript Token output types for Max and All Access installations. They let an administrator maintain reusable browser-side code as a Token while still applying normal QCDR page, extension, audience, schedule, IP, and condition targeting.

These are executable browser outputs, not plain text snippets. Treat the Token content as trusted administrator-managed code and test it in a controlled scope before enabling it broadly.

Create the Token

  1. Open Components > QC Dynamic Replacer > Tokens and create a new Token.
  2. Enter the Token name and Friendly name, then leave the Token in Draft while testing.
  3. Choose CSS or JavaScript for Output type. These current output types require Max-level QCDR access.
  4. Enter the CSS rules or JavaScript code body in Token content or configuration.
  5. Configure any page, component/module, audience, schedule, IP, or technical-condition restrictions that should limit where the code can appear.
  6. Save the Token, test it in the intended frontend context, then change its status to Enabled when the result is correct.

What QCDR Emits

When a CSS Token resolves as a normal standalone Token in rendered page content, QCDR wraps its content in a <style> element. JavaScript Tokens are similarly wrapped in a <script> element. QCDR adds a data-qcdr-token attribute identifying the Token that produced the element.

When a Rule explicitly uses the Token as a replacement for a CSS or JavaScript target, the runtime can return the raw code instead of adding a second wrapper. That lets a deliberate Rule target a technical context without nesting another <style> or <script> element inside it.

Standalone Placement Is Intentionally Conservative

The standalone Token scanner does not search inside existing script, style, code-like, form, HTML-comment, tag, or attribute regions. Therefore, placing a literal {token.name} inside an existing <script> or <style> block is not the normal way to inject a CSS/JavaScript Token.

Use the Token in eligible rendered content so QCDR can emit its own wrapper, or use an explicit Rule when you intentionally need to transform a technical region.

Nested Tokens and Side Effects

CSS and JavaScript Token content may contain other QCDR Token references. QCDR resolves eligible dependencies before formatting the final output, and the Token inherits the highest required tier in its dependency chain.

JavaScript emitted by the Token runs in the visitor's browser like other page JavaScript. Avoid code with unintended repeated side effects, and verify the result with the exact template, CSP/security configuration, page cache, and extensions used by the production page.

Verify Before Broadening the Scope

  • Confirm the Token appears only on its intended pages and render regions.
  • Inspect the browser DOM to verify the generated style/script element.
  • Check the browser console for JavaScript or policy errors.
  • Test guest and authenticated contexts separately when audience targeting is involved.

Community Discussion

Want to compare workflows, share practical tips, or discuss how you use this QCDR feature? Visit the QC Dynamic Replacer Community. For private support, bug reports, account-specific issues, or feature requests, use the QuantaCade support system.