Skip to main content

Technical Documentation - Integrate Partner Personalization on Your Landing Page

Inflektion personalization technology will inject partner-specific content (name, quote, image, favorite product, brand logo) directly into your landing pages. Partners manage this content themselves in the Inflektion dashboard, and our system automatically swaps it into your site when a visitor arrives through their link.

Implementation is simple:

  • Option 1: Default content visible
    Place a real testimonial block on your page. When a partner has added their own content, Inflektion will replace your default with the partner version.
  • Option 2: Hidden content
    Add the markup with the correct IDs, but keep it hidden until a partner with content visits. Inflektion will unhide and populate the block when partner data is available.

Under the hood, Inflektion uses CSS selectors (IDs and classes) you define on your page. These are mapped to partner variables in your dashboard as Global Customizations. When a partner visit occurs, we replace the values of those selectors with the correct partner data (name, image, quote, promotion, etc).

This approach is client-side and platform agnostic, working across Shopify, WordPress, other platforms or custom frameworks.

For more about variables, see: Inflektion Personalization Fields Available For Use

Here’s an example screenshot of what the customizations looks like in our partner portal:

Steps to add Personalization Blocks to page

  1. Paste the HTML (example below) where you want personalization blocks.
  2. Add your CSS to match your design.
  3. Once completed, contact Inflektion to activate the dynamic code updates. You can reach us via email at brand-support@inflektion.ai or through your dedicated Slack Channel

Quick Start: Copy‑Paste Code Blocks

Below are ready‑to‑use snippets pulled directly from our demo store (Sugarpop Gummies). 

Sample Testimonial Box from page: https://sugarpopgummies.com/bbhome

Homepage Testimonial Box example code:

<!-- Partner Testimonial Box -->
<section class="partner-testimonial" style="display:none;">
  <div class="partner-testimonial__inner">
    <img id="AMBASSADOR_IMAGE" src="https://via.placeholder.com/300x300" alt="Partner photo" style="max-width:120px; border-radius:50%; object-fit:cover;" />
    <blockquote id="AMBASSADOR_QUOTE">“Your partner's testimonial will appear here.”</blockquote>
    <div id="AMBASSADOR_NAME" class="partner-name">what {PARTNERNAME} has to say</div>
    <div id="AMBASSADOR_AUTHOR_NAME" class="partner-author">— {PARTNERNAME}</div>
  </div>
</section>

CRM Email Capture (HubSpot / Klaviyo) — Personalized

You can load an email capture form from your CRM (e.g., HubSpot, Klaviyo) and dynamically personalize copy (headline, promo) and/or hidden fields with partner data. This is to help lift email-capture conversion rates. 

Example popup modal from https://sugarpopgummies.com/biohackerbob


Email Capture Popup / Modal example code

<!-- Partner Modal -->
<div id="ambassador-modal" class="ambassador-modal lity-hide" aria-hidden="true" style="display:none;">
  <button class="lity-close" type="button" data-lity-close aria-label="Close"></button>
  <div class="ambassador-modal-inner">
    <div class="ambassador-modal-wrap">
      <div class="ambassador-modal--image">
        <!-- Replaced with partner image or brand asset -->
        <span id="AMBASSADOR_MODAL_IMAGE"></span>
      </div>
      <div class="ambassador-modal--content">
        <!-- Replaced with promo headline/text -->
        <h3><span id="ambassador-modal-title">Limited Time Offer</span></h3>
        <div class="ambassador-modal-unlock">
          <span id="AMBASSADOR_MODAL_PROMOTION">GET 20% OFF</span>
        </div>
        <!-- Your form or CTA -->
        <form id="EMAIL_FORM" class="ambassador-modal-form">
          <div class="form-group">
            <input id="ambassador-email" type="email" placeholder="Enter Your Email Here" required>
          </div>
          <div class="form-group">
            <button id="ambassador-submit" type="submit">Send me my discount</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Styling

Inflektion personalization replaces content, not design. You will need to add your own CSS so the testimonial, and modal blocks match the look and feel of your site.

Keep in mind:

  • Use your site’s existing colors, fonts, and spacing so the blocks feel native.
  • Make sure images are sized consistently and text is easy to read.
  • Apply responsive styles so blocks look good on mobile as well as desktop.

The HTML snippets provided above give you the correct IDs for Inflektion to target. How those blocks look is completely up to your CSS stylings.

If you have any questions or need help customizing your landing pages, feel free to reach out to us at brand-support@inflektion.ai or through your dedicated Slack channel. Our team is happy to review your setup and make sure personalization is working seamlessly for your brand.

Was this article helpful?