Integration Guide for pagent.ai SDK

To dynamically manage A/B testing and personalized elements on your website, you need to integrate the pagent.ai SDK script directly into your webpage. Follow these instructions carefully to ensure that the script runs early and efficiently, minimizing any impact on loading times.

SDK Integration Requirements

The pagent.ai SDK script is designed to run at page load and immediately activate A/B test variations for specific elements on your page. To ensure the best performance and compliance with data privacy standards, choose the appropriate variant of the SDK script based on your needs.

Script Placement

Place the SDK script inside the <head> section of your HTML. This ensures it loads early in the page lifecycle, allowing the test conditions to apply seamlessly and avoiding any flickering or delays in displaying A/B variations. We do not recommend integrating the pagent.ai SDK via Google Tag Manager, as the script needs to run as early as possible for optimal performance.

Script Variants

  1. Default Variant

    • This script begins running immediately upon page load.

  2. Opt-In Variant

    • This version of the script will not set any cookies until optIn is triggered.

Example Integration

Replace [YOUR_KEY] with the actual key provided by pagent.ai. You can find the script to include in your pagent settings.

Default Variant

<head>
  <!-- pagent.ai SDK Script - Default Variant -->
  <script data-client-key="[YOUR_KEY]" src="https://cdn.pagent.ai/js/sdk.js"></script>
</head>

Opt-In Variant

<head>
  <!-- pagent.ai SDK Script - Opt-In Variant -->
  <script data-client-key="[YOUR_KEY]" data-opt-in="true" src="https://cdn.pagent.ai/js/sdk.js"></script>
</head>

Once you have consent from your user, execute the optIn command as follows:

window.pagent.optIn();

Alternatively, you can have a script injected into your page upon consent, like below:

<script>window.pagent.optIn();</script>

Important Notes

  • Performance Impact: The SDK script is served via a CDN to reduce latency and should not negatively affect your page load times.
  • Flicker-Free Execution: Integrating the script in the section allows pagent.ai to make any necessary page modifications without causing a flash of unstyled content (FOUC) or other visible page shifts.

Troubleshooting Tips

  • Test in Staging: Before deploying to production, test the integration in a staging environment to ensure A/B variations apply as expected.
  • Verify Consent Mechanisms: If using the opt-in variant, confirm that consent is collected and managed correctly on your site.
  • Monitor Loading Times: Regularly audit the page load performance to ensure the script remains optimized.

For further assistance, please refer to support@pagent.ai.

Setting Security Headers

To ensure your web page can securely access and send data to pagent.ai, you need to configure the appropriate security headers. Below is a guide for setting up these headers, including a Content Security Policy (CSP).

Content Security Policy (CSP)

The Content Security Policy header controls which resources can be loaded on your page. To allow *.pagent.ai, you need to include it in your policy. Here’s an example configuration:

Content-Security-Policy: connect-src 'self' https://*.pagent.ai; frame-src 'self' *.pagent.ai;