Snippet Installation

Our API will provide personalized content for your website and snippet will update the content on your page according to tempalte mapping.

To install the snippet you need to paste the following code into your website’s HTML:

<script>
  (function (p, t, r, n, s) {
    p['ptrnsObject'] = s;
    p[s] = p[s] || function () {
      (p[s].q = p[s].q || []).push(arguments);
    };
    var firstScript = t.getElementsByTagName(r)[0],
      newScript = t.createElement(r);
    newScript.async = true;
    newScript.src = 'https://cdn.patterns.company/snippet.js';
    firstScript.parentNode.insertBefore(newScript, firstScript);
  })(window, document, 'script', 'patterns', 'ptrns');

  ptrns('init', { id: 'YOUR_PATTERNS_SNIPPET_ID' });
</script>

Activating

To get personalized content on your website, you need to add pattern={patternId} query parameter to the URL. Where patternId is the ID of the content you want to use for personalization. For example, if your website URL is https://example.com, you can add the pattern ID like this: https://example.com?pattern=patternId.

Listening to render completion event

You can listen to the render completion event by adding the following code:

  document.addEventListener("patternsRendered", function(event) {
    console.log("Patterns have been rendered with ID:", event.detail.patternId);
    // Additional logic here
  });

If you are making some kind of anti-flicker solution, you can hide the content until the patternsRendered event is fired.

Enforcing updates on DOM changes

If you are using a single-page application (SPA) or updating the DOM dynamically, you can enforce the update by calling the updatePatternDOM function.

  // Call this whenever you want to re-apply the same pattern data:
  window.ptrns.updatePatternDOM();

Or you can pass enforce flag during the initialization:

  // Enforce will re-apply the updated attributes/text if other scripts modify them
  window.ptrns.q.push(['init', { id: 'YOUR_PATTERNS_SNIPPET_ID', enforce: true }]);

In that case it will take care of updating the content on the page when the DOM changes.

Debugging

To enable debugging, you can set the debug flag to true in the query parameter. For example:

https://example.com?pattern=patternId&debug=true

This will log the debug information to the console, which can help you troubleshoot any issues with the snippet.

Get Started

API Reference

Activating

Listening to render completion event

Enforcing updates on DOM changes

Debugging

​Activating

​Listening to render completion event

​Enforcing updates on DOM changes

​Debugging

Activating

Listening to render completion event

Enforcing updates on DOM changes

Debugging