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

# Qualifio

> Integrate with Qualifio for survey functionality

export const NoBadge = () => {
  return <span style={{
    display: 'inline-block',
    padding: '0.125rem 0.5rem',
    borderRadius: '0.25rem',
    fontSize: '0.625rem',
    background: '#F7D0E2',
    color: '#1A1A1A',
    fontWeight: '500'
  }}>
      No
    </span>;
};

export const YesBadge = () => {
  return <span style={{
    display: 'inline-block',
    padding: '0.125rem 0.5rem',
    borderRadius: '0.25rem',
    fontSize: '0.625rem',
    background: '#C7E8F9',
    color: '#1A1A1A',
    fontWeight: '500'
  }}>
      Yes
    </span>;
};

export const BadgeRowCenter = ({label, children}) => {
  return <div style={{
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: '0.5rem'
  }}>
      <span style={{
    fontSize: '0.625rem',
    color: '#6b7280',
    textTransform: 'uppercase',
    fontWeight: '500',
    letterSpacing: '0.05em'
  }}>
        {label}
      </span>
      {children}
    </div>;
};

export const BadgeRow = ({label, children}) => {
  return <div style={{
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginBottom: '0.5rem'
  }}>
      <span style={{
    fontSize: '0.625rem',
    color: '#6b7280',
    textTransform: 'uppercase',
    fontWeight: '500',
    letterSpacing: '0.05em'
  }}>
        {label}
      </span>
      {children}
    </div>;
};

export const BadgeContainer = ({children}) => {
  return <div style={{
    display: 'flex',
    gap: '0.25rem',
    flexWrap: 'wrap',
    justifyContent: 'flex-end',
    minWidth: '0',
    flex: '1'
  }}>
      {children}
    </div>;
};

export const ProductRequiredBadge = ({product}) => {
  const getBadgeStyle = product => {
    switch (product) {
      case 'Core Platform':
        return {
          background: '#CB88FC',
          color: '#1A1A1A'
        };
        --purple;
      case 'Routing':
        return {
          background: '#CB88FC',
          color: '#1A1A1A'
        };
        --purple;
      case 'Contextual':
        return {
          background: '#CB88FC',
          color: '#1A1A1A'
        };
        --purple;
      default:
        return {
          background: '#A7B3D9',
          color: '#1A1A1A'
        };
        --haze;
    }
  };
  const style = getBadgeStyle(product);
  return <span style={{
    display: 'inline-block',
    padding: '0.125rem 0.375rem',
    borderRadius: '0.25rem',
    fontSize: '0.625rem',
    background: style.background,
    color: style.color,
    fontWeight: '500'
  }}>
      {product}
    </span>;
};

export const SdkRequiredBadge = ({required}) => {
  const getBadgeStyle = required => {
    switch (required) {
      case 'Yes':
        return {
          background: '#C7E8F9',
          color: '#1A1A1A'
        };
        --blue;
      case 'No':
        return {
          background: '#F7D0E2',
          color: '#1A1A1A'
        };
        --pink;
      default:
        return {
          background: '#A7B3D9',
          color: '#1A1A1A'
        };
        --haze;
    }
  };
  const style = getBadgeStyle(required);
  return <span style={{
    display: 'inline-block',
    padding: '0.125rem 0.375rem',
    borderRadius: '0.25rem',
    fontSize: '0.625rem',
    background: style.background,
    color: style.color,
    fontWeight: '500'
  }}>
      {required}
    </span>;
};

export const CapabilityBadge = ({capability}) => {
  const getBadgeStyle = capability => {
    switch (capability) {
      case 'Event Collection':
        return {
          background: '#EFDFC8',
          color: '#1A1A1A'
        };
        --clay;
      case 'Cohort Activation':
        return {
          background: '#EFDFC8',
          color: '#1A1A1A'
        };
        --clay;
      case 'Campaign Optimization':
        return {
          background: '#EFDFC8',
          color: '#1A1A1A'
        };
        --clay;
      case 'Identity Signal':
        return {
          background: '#EFDFC8',
          color: '#1A1A1A'
        };
        --clay;
      case 'Contextual Signal':
        return {
          background: '#EFDFC8',
          color: '#1A1A1A'
        };
        --clay;
      case 'Connectivity':
        return {
          background: '#EFDFC8',
          color: '#1A1A1A'
        };
        --clay;
      case 'Routing':
        return {
          background: '#EFDFC8',
          color: '#1A1A1A'
        };
        --clay;
      case 'Data Collaboration':
        return {
          background: '#EFDFC8',
          color: '#1A1A1A'
        };
        --clay;
      default:
        return {
          background: '#A7B3D9',
          color: '#1A1A1A'
        };
        --haze;
    }
  };
  const style = getBadgeStyle(capability);
  return <span style={{
    display: 'inline-block',
    padding: '0.125rem 0.375rem',
    borderRadius: '0.25rem',
    fontSize: '0.625rem',
    background: style.background,
    color: style.color,
    fontWeight: '500',
    whiteSpace: 'nowrap'
  }}>
      {capability}
    </span>;
};

export const EnvironmentBadge = ({environment}) => {
  const getBadgeStyle = environment => {
    switch (environment) {
      case 'Web':
        return {
          background: '#F9C1A8',
          color: '#1A1A1A'
        };
        --peach;
      case 'iOS':
        return {
          background: '#F9C1A8',
          color: '#1A1A1A'
        };
        --peach;
      case 'Android':
        return {
          background: '#F9C1A8',
          color: '#1A1A1A'
        };
        --peach;
      case 'CTV':
        return {
          background: '#F9C1A8',
          color: '#1A1A1A'
        };
        --peach;
      case 'API Direct':
        return {
          background: '#F9C1A8',
          color: '#1A1A1A'
        };
        --peach;
      default:
        return {
          background: '#A7B3D9',
          color: '#1A1A1A'
        };
        --haze;
    }
  };
  const style = getBadgeStyle(environment);
  return <span style={{
    display: 'inline-block',
    padding: '0.125rem 0.375rem',
    borderRadius: '0.25rem',
    fontSize: '0.625rem',
    background: style.background,
    color: style.color,
    fontWeight: '500',
    whiteSpace: 'nowrap'
  }}>
      {environment}
    </span>;
};

export const DirectionBadge = ({direction}) => {
  const getBadgeStyle = direction => {
    switch (direction) {
      case 'Bidirectional':
        return {
          background: '#FA8784',
          color: '#1A1A1A'
        };
        --tomato;
      case 'Destination':
        return {
          background: '#FA8784',
          color: '#1A1A1A'
        };
        --tomato;
      case 'Source':
        return {
          background: '#FA8784',
          color: '#1A1A1A'
        };
        --tomato;
      default:
        return {
          background: '#A7B3D9',
          color: '#1A1A1A'
        };
        --haze;
    }
  };
  const style = getBadgeStyle(direction);
  return <span style={{
    display: 'inline-block',
    padding: '0.125rem 0.375rem',
    borderRadius: '0.25rem',
    fontSize: '0.625rem',
    background: style.background,
    color: style.color,
    fontWeight: '500'
  }}>
      {direction}
    </span>;
};

<Card title="">
  <div style={{ display: 'flex', alignItems: 'center', marginBottom: '1rem' }}>
    <div style={{ width: '32px', height: '32px', marginRight: '0.75rem', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
      <img src="https://mintcdn.com/permutive/Juzd3YB8HgaWRAEF/images/integrations/logos/qualifio.png?fit=max&auto=format&n=Juzd3YB8HgaWRAEF&q=85&s=2abba6768141771ee4333bcf68fbf818" alt="Qualifio" style={{ maxWidth: '32px', maxHeight: '32px', display: 'block' }} width="32" height="32" data-path="images/integrations/logos/qualifio.png" />
    </div>

    <h3 style={{ margin: 0, fontSize: '1.125rem', fontWeight: '600' }}>Qualifio</h3>
  </div>

  <div style={{ marginBottom: '1rem' }}>
    <BadgeRowCenter label="Direction">
      <DirectionBadge direction="Source" />
    </BadgeRowCenter>

    <BadgeRowCenter label="Environment">
      <BadgeContainer>
        <EnvironmentBadge environment="Web" />
      </BadgeContainer>
    </BadgeRowCenter>

    <BadgeRowCenter label="Capability">
      <BadgeContainer>
        <CapabilityBadge capability="Event Collection" />
      </BadgeContainer>
    </BadgeRowCenter>

    <BadgeRowCenter label="SDK Required">
      <SdkRequiredBadge required="Yes" />
    </BadgeRowCenter>

    <BadgeRowCenter label="Product(s) Required">
      <ProductRequiredBadge product="Core Platform" />
    </BadgeRowCenter>
  </div>

  <p style={{ margin: 0, fontSize: '0.875rem', color: '#6b7280', lineHeight: '1.5' }}>
    Qualifio allows publishers to create interactive experiences (polls, contests) to boost engagement and collect first-party data.
  </p>
</Card>

<CardGroup cols={2}>
  <Card title="Setup" href="#setup" icon="gear" />

  <Card title="Troubleshooting" href="#troubleshooting" icon="wrench" />
</CardGroup>

## Overview

Qualifio is the leading first- and zero-party data collection platform for media groups and consumer brands. The platform enables marketing teams to generate engagement and capture data through quizzes, games, contests, and over 50 other interactive formats via Qualifio Engage, and to reward and segment members with interaction-based programs through Qualifio Loyalty.

The Permutive integration with Qualifio Engage allows you to deliver survey response data from any Qualifio campaign directly into your Permutive workspace. This is a Source integration where Qualifio has integrated with Permutive, meaning you enable the integration from within the Qualifio platform after Permutive configures a custom event in your workspace.

Use cases include:

* Build cohorts based on survey responses to understand audience preferences and interests
* Target users who answered specific questions in particular ways
* Enrich audience profiles with zero-party data collected through interactive campaigns
* Segment audiences based on engagement with quizzes and surveys

## Environment Compatibility

| Environment    | Supported    | Notes |
| -------------- | ------------ | ----- |
| **Web**        | <YesBadge /> | --    |
| **iOS**        | <NoBadge />  | --    |
| **Android**    | <NoBadge />  | --    |
| **CTV**        | <NoBadge />  | --    |
| **API Direct** | <NoBadge />  | --    |

## Prerequisites

* **Permutive SDK Deployment** - The Permutive JavaScript SDK must be deployed on your website where Qualifio campaigns will run.
* **Custom Event Configuration** - This integration requires a custom `QualifioSurveyResponse` event to be preconfigured in your Permutive workspace. Contact your Permutive Customer Success Manager (CSM) to request this custom event setup.
* **Qualifio Account** - You must have an active Qualifio account with access to campaign configuration settings.

## Setup

<Tabs>
  <Tab title="Primary Setup Steps">
    <Steps>
      <Step title="Request Custom Event Configuration">
        Contact your Permutive Customer Success Manager (CSM) to request the setup of the `QualifioSurveyResponse` custom event in your workspace. This step must be completed before you can proceed with enabling the integration.

        The event schema will be configured to accept the following data fields:

        * Survey site URL
        * Survey ID
        * Survey completion status
        * Question text
        * Answer text
      </Step>

      <Step title="Enable Integration in Qualifio">
        Once the custom event has been configured in your Permutive workspace, follow the instructions on the Qualifio support website to enable the Permutive integration for your campaigns:

        * **English**: [How does Permutive DMP work with my Qualifio campaigns](https://support.qualifio.com/hc/en-us/articles/7457736575516-How-does-Permutive-DMP-work-with-my-Qualifio-campaigns)
        * **French**: [Comment fonctionne Permutive DMP avec mes campagnes Qualifio](https://support.qualifio.com/hc/fr/articles/7457736575516)

        During this process, you will need to provide your Permutive Project ID, which can be found in your Permutive dashboard.
      </Step>

      <Step title="Verify Event Collection">
        After enabling the integration in Qualifio, run a test campaign and submit survey responses. In your Permutive dashboard, navigate to the Events page and verify that `QualifioSurveyResponse` events are being collected. You should see recent events appearing in the Events list with the survey response data.
      </Step>

      <Step title="Build Survey-Based Cohorts">
        Once event collection is verified, you can build cohorts based on survey responses. In the Permutive cohort builder, the `QualifioSurveyResponse` event will appear in the event dropdown list.

        For example, you can create cohorts for:

        * Users who completed a specific survey
        * Users who answered a particular question with a specific response
        * Users who engaged with any Qualifio campaign
      </Step>
    </Steps>
  </Tab>

  <Tab title="Web">
    The Qualifio integration works automatically once the Permutive SDK is deployed and the custom event is configured. No additional web-specific implementation is required beyond the standard Permutive SDK deployment.

    Ensure that the Permutive SDK is loaded on all pages where Qualifio campaigns will be displayed to capture survey response data.
  </Tab>
</Tabs>

## Data Types

With your Qualifio integration setup, you'll see the following event type collected in Permutive:

<AccordionGroup>
  <Accordion title="QualifioSurveyResponse">
    This event is triggered when a user responds to a Qualifio survey question. The event captures details about the survey, question, and answer provided.

    <ResponseField name="site" type="string">
      The URL of the site where the Qualifio campaign is running. Example: `https://my-survey.com`
    </ResponseField>

    <ResponseField name="survey.id" type="string">
      The unique identifier for the Qualifio campaign. Example: `12345`
    </ResponseField>

    <ResponseField name="survey.complete" type="boolean">
      Indicates whether this response completes the survey. Set to `true` when this is the last question in the survey, `false` otherwise.
    </ResponseField>

    <ResponseField name="question.text" type="string">
      The text of the survey question presented to the user. Example: `How old are you?`
    </ResponseField>

    <ResponseField name="answer.text" type="string">
      The user's response to the question. Example: `30`
    </ResponseField>
  </Accordion>
</AccordionGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="QualifioSurveyResponse events are not appearing in Permutive">
    Verify the following:

    * The custom `QualifioSurveyResponse` event has been configured in your Permutive workspace. Check the Events page in your dashboard to confirm the event exists.
    * The Permutive integration is enabled in your Qualifio campaign settings with the correct Project ID.
    * The Permutive SDK is deployed and loading correctly on the pages where your Qualifio campaigns are displayed. Use the Permutive Chrome Extension to verify SDK presence.
    * Test with a simple survey to isolate any configuration issues.
  </Accordion>

  <Accordion title="Custom event not configured in workspace">
    The `QualifioSurveyResponse` event is a custom event that must be preconfigured before the integration will work. If you attempt to enable the integration in Qualifio without this custom event being set up first, survey data will not be collected.

    Contact your Permutive Customer Success Manager (CSM) to request the custom event setup.
  </Accordion>

  <Accordion title="Unable to build cohorts using survey data">
    If the `QualifioSurveyResponse` event is not appearing in the cohort builder dropdown:

    * Confirm that events are being collected by checking the Events page in your dashboard.
    * Ensure at least one event has been received. Events only appear in the cohort builder after data has been collected.
    * Wait a few minutes after the first event is received, then refresh the cohort builder page.

    If events are being collected but still not appearing, contact Permutive support for assistance.
  </Accordion>
</AccordionGroup>

## Changelog

<Info>
  For the latest updates and changes to this integration, visit [changelog.permutive.com](https://changelog.permutive.com).
</Info>