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

# Vibe

> An introduction to the Vibe Destination

export const OutboundLink = ({linkText, linkTarget}) => {
  return <a target="_blank" href={linkTarget}> {linkText} 
    <div className="inline h-3 w-3 fill-gray-500 dark:fill-gray-100 text-gray-500 dark:text-gray-300 ml-1 mr-1">
      <svg className="inline w-2.5 h-2.5 bg-gray-500 dark:bg-gray-300" style={{
    maskImage: `url('https://mintlify.b-cdn.net/v6.5.1/solid/up-right-from-square.svg')`,
    maskRepeat: "no-repeat",
    maskPosition: "center center"
  }}></svg> 
    </div>
    </a>;
};

export const IconText = ({name, text, iconSource = "mintlify", iconLocation = "before", iconType = "solid"}) => {
  const sourceUrl = iconSource === 'local' ? `url('/images/icons/${name}.svg')` : `url('https://mintlify.b-cdn.net/v6.5.1/${iconType}/${name}.svg')`;
  return <>
            <div className="inline-block pl-2">
                {iconLocation === 'before' && <div className="h-3.5 w-3.5 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100 inline-block align-middle mr-2">
                        <svg className="w-4 h-4 bg-gray-800 dark:bg-gray-100 " style={{
    maskImage: sourceUrl,
    maskRepeat: "no-repeat",
    maskPosition: "center center"
  }} />
                    </div>}
                <span className="inline-block align-middle font-semibold fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100 pl-1 pr-2">{text}</span>
                {iconLocation === 'after' && <div className="h-3.5 w-3.5 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100 inline-block align-middle mr-2">
                        <svg className="w-4 h-4 bg-gray-800 dark:bg-gray-100 pr-3" style={{
    maskImage: sourceUrl,
    maskRepeat: "no-repeat",
    maskPosition: "center center"
  }} />
                    </div>}
            </div>
        </>;
};

export const Icon = ({name}) => {
  return <div className="h-4 w-4 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100 inline-block align-middle">
            <svg className="w-4 h-4 bg-gray-800 dark:bg-gray-100" style={{
    maskImage: `url('https://mintlify.b-cdn.net/v6.5.1/solid/${name}.svg')`,
    maskRepeat: "no-repeat",
    maskPosition: "center center"
  }} />
        </div>;
};

## Overview

Destination Type: <IconText text="Client-side" name="browser" iconType="duotone" iconLocation="after" />

* Converge automatically loads the Vibe Pixel (`vbpx.js`) and forwards supported events.
* For Vibe's official pixel reference, see <OutboundLink linkText="Vibe Pixel help" linkTarget="https://help.vibe.co/en/articles/6530668-vibe-pixel" />.

***

## Installation instructions

<Steps>
  <Step title="Find your Vibe Advertiser ID (also called Pixel ID)">
    1. In your Vibe account, go to **Settings** → **Tracking** → **Web Pixel**.
    2. Choose your **Advertiser** and click **Setup**.
    3. Copy the **Advertiser ID** from the pixel setup page.

    <Note>
      If you are using the manual implementation in Vibe, this is the same ID that appears inside the pixel snippet you would normally paste between your site's <code>\<head></code> tags.
    </Note>
  </Step>

  <Step title="Create the destination in Converge">
    4. In the Converge sidebar, click <IconText name="arrow-right-from-line" text="Event streams" /> → **Create new Destination**.
    5. Select **Vibe** and click **Next**.
    6. Give your destination a **name** (e.g. Vibe Destination) and click **Next**.
    7. Paste your **Advertiser ID** and click **Next**.
    8. Keep **Default mapping** or configure **Custom mapping**, then click **Next**.
    9. Select the sources you want to forward events from, then click **Next**.
    10. Review any issues and click **Submit**.
  </Step>
</Steps>

<Warning>
  If you already installed the Vibe Pixel directly in your site or via GTM, pause or remove that setup to avoid duplicate tracking. Converge will load <code>vbpx.js</code> on your pages.
</Warning>

***

## Converge functionality

This integration supports the following Converge destination functionality.

| Converge Feature   |       Supported       |
| ------------------ | :-------------------: |
| Custom Events      | <Icon name="xmark" /> |
| Filters            | <Icon name="xmark" /> |
| Server-side Events | <Icon name="xmark" /> |

***

## Verify your implementation

After activating this connection, verify that events are being sent to Vibe by checking your Vibe Advertisers dashboard:

1. In your Vibe account, go to **Settings** → **Tracking** → **Web Pixel** (same location as when finding your Advertiser ID).
2. On the Web Pixel page, you'll see a table showing your advertisers and their event metrics.
3. Check the event counts for **Page view**, **Lead**, and **Purchase** to confirm events are being received. Also, verify the **Last event** date shows recent activity.

<img src="https://mintcdn.com/converge/ePVG343yp0Yotvlu/images/destinations/vibe/vibe-1.png?fit=max&auto=format&n=ePVG343yp0Yotvlu&q=85&s=171947c9aa488386798a9799f7216c6f" alt="Vibe Web Pixel Dashboard" width="2310" height="1015" data-path="images/destinations/vibe/vibe-1.png" />

<Note>
  It may take some time for Vibe to display this data. Vibe's dashboard is not always real-time, so there may be a delay before events appear.
</Note>

Alternatively, you can verify your implementation using your browser's Developer Tools:

1. Open the page(s) where the pixel should fire.
2. Open **Developer Tools** → **Network** tab.
3. Filter by "Vibe".
4. You should see two network rows:
   * `vbpx.js`
   * `s?aid...`
5. Click the `s?aid...` row → **Payload**.
   * The `aid` parameter should show your Advertiser ID.
   * The `a` parameter should show the event name (e.g. `page_view`, `lead`, or `purchase`).

For more details, refer to the Vibe documentation: <OutboundLink linkText="Vibe Pixel help" linkTarget="https://help.vibe.co/en/articles/6530668-vibe-pixel" />.

***

## Event mapping

Converge automatically maps the following events from the [Converge event spec](/sources/converge-spec) to the Vibe pixel.

| Converge Event Name                                 | Vibe Event Name |
| --------------------------------------------------- | --------------- |
| [\$page\_load](/sources/converge-spec#page-load)    | `page_view`     |
| [Lead](/sources/extending-the-spec/custom-events)   | `lead`          |
| [Placed Order](/sources/converge-spec#placed-order) | `purchase`      |

### Purchase parameters sent

* **price\_usd**: Converge forwards the total purchase value converted to USD when available.
* **purchase\_id**: Forwarded when present, enabling per-order reconciliation in Vibe.

<Note>
  Vibe allows you to attribute purchases with dynamic values. Converge handles currency conversion by sending <code>price\_usd</code> to Vibe when the original event is in a non-USD currency.
</Note>

***

## Additional events and custom mapping

Vibe does not accept arbitrary custom event names. The Vibe Pixel recognizes only three event types: `page_view`, `lead`, and `purchase`.
