> ## Documentation Index
> Fetch the complete documentation index at: https://docs.patterns.company/llms.txt
> Use this file to discover all available pages before exploring further.

# Snippet Installation

> This is how your page content will be personalized.

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

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

```js theme={null}

<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:

```js theme={null}
  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.

```js theme={null}

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

```

Or you can pass enforce flag during the initialization:

```js theme={null}

  // 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:

```js theme={null}
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.