Partner Partner Directory Widget Setup & Customization Guide

The Partner Partner Directory widget lets you showcase partners on your website through a simple, customizable embed. This guide walks you through setup, available options, and how to override styles to match your site's look and feel.

1. How to Embed the Widget

Add this code snippet to your website where you want the directory to appear:

<div id="prish-partner-feed"     
data-id="YOUR_UNIQUE_ID"      
data-type="agency"      
data-layout="grid"      
data-theme="light"> 
</div> 

<script src="https://app.prish.io/widget.js"></script>

Replace the following:

YOUR_UNIQUE_ID: Provided by Partner Partner to identify your directory feed.

This code snippet is automatically generated for you on the Company Info page of your Partner Partner app.

2. Customizable Options (Data Attributes)

Control the widget appearance using these attributes:

Attribute	Description	Options
`data-id`	Your unique feed ID (required)	Example: `abc123xyz`
`data-type`	Partner type to display	`agency` or `tech`
`data-layout`	Layout style for partner cards	`grid` (columns) or `list` (rows)
`data-theme`	Color theme	`light` or `dark`

Example using list layout and dark theme:

<div id="prish-partner-feed"      
data-id="abc123xyz"      
data-type="tech"      
data-layout="list"      
data-theme="dark"> 
</div>

3. What Displays in the Widget

Each partner card may show:

✅ Logo (if provided)
✅ Company/Agency Name
✅ Response Time (if provided)
✅ Services offered
✅ Hourly Rate (if provided)
✅ Minimum Project Size (if provided)

Clicking a partner card opens their full Partner Partner profile in a new tab.

4. Overriding Styles with CSS

You can customize the widget's appearance by adding your own CSS rules.

Available CSS Classes and IDs to Target

Selector	Description
`#prish-partner-feed`	Main container for the directory
`.prish-card`	Individual partner card
`.prish-logo`	Partner logo image
`.prish-card-info`	Text container (list layout only)
`.prish-card-name`	Partner name text
`.prish-card-services`	List container for services offered
`.prish-card-services li`	Individual service "tag"

Example CSS Customizations:

/* Change partner card background */ #prish-partner-feed .prish-card {     background-color: #f5f5f5 !important;     border: 1px solid #ccc !important; }  /* Adjust partner name style */ #prish-partner-feed .prish-card-name {     color: darkblue !important;     font-size: 18px !important; }  /* Customize service tags */ #prish-partner-feed .prish-card-services li {     background-color: #ddd !important;     color: #333 !important; }  /* Control logo size */ #prish-partner-feed .prish-logo {     height: 80px !important;     object-fit: contain !important; }

Tips:

Use !important to override default widget styles.
Include your CSS after the <script src="https://app.prish.io/widget.js"></script> line.

5. Advanced Targeting Examples

Target specific layouts or themes with attribute selectors:

/* Styles only for list layout */ #prish-partner-feed[data-layout="list"] .prish-card {     flex-direction: row !important; }  /* Styles for dark theme */ #prish-partner-feed[data-theme="dark"] .prish-card {     background-color: #222 !important; }

6. Troubleshooting

Nothing displaying? Ensure your profiles are public in Partner Partner.
Message about your profile? Your directory may be inactive—check your Partner Partner settings.
Custom styles not applying? Confirm your CSS loads after the widget script and uses correct selectors.

7. Need Assistance?

Questions or advanced customization needs? Contact [email protected].

Note: Structural layout and functionality cannot be altered beyond the options shown. Customizations are limited to visual appearance via CSS.

How to Embed and Customize the Partner Partner Jobs Widget