📌 JobPixel WebConnect Setup Guide

What This Setup Will Achieve

Once you’ve installed the JobPixel WebConnect code snippet on your site, you can begin publishing and updating dynamic, branded content (videos, images, widgets, job posts) directly to your website pages — without any additional manual uploads or website customization necessary.

This guide walks you through:

• How to configure your WebConnect rules in JobPixel
• How to preview the content before going live
• How it will look and behave once live on your site

Let’s get started 👇

🔧 Step 1: Add the WebConnect JavaScript Code to Your Website

Click the Integration Code on the top.

Your web developer should add that code snippet to the page or pages where you want to deploy your content.

Note for sites with strict security settings: Some websites use CSP, CORS, or other security controls that can block third-party scripts, media, or API requests. If WebConnect does not load as expected, your web developer or IT/security team may need to allow the JobPixel resources used by your embed code.

Once this is in place, you’re ready to configure the WebConnect integration in JobPixel.

⚙️ Step 2: Configure a WebConnect Integration in JobPixel

1. Log in to your JobPixel account
2. Click Settings in the top navigation
3. Click the Integrations tab
4. Under JobPixel WebConnect, click Configure

If You’re Creating a New Rule

Click New Entry in the upper right to start a fresh integration rule.

Or, if we’ve created a sample rule for you (like in the example screenshot below), just click on the existing entry to edit it.

Step-by-Step: What Each Field Means & How to Use It

1. Integration Name

Give your rule a clear name (e.g., “Physical Therapist Roles”) so you can easily manage, edit or duplicate it later.

2. Trigger

This defines the rules for when the your content should appear on a target page.

• CSS Selector:

  Enter the unique CSS selector that contains the text on the page that you want to match.

  👉 Example: .page-heading-title  

  🧠 Tip: This value with be unique to your website's design.

• Text Match:

  Enter the text (or part of it) to look for.

  👉 Example: Physical Therapist  — this means if the text value from the CSS Selector match above contains this phrase, it will trigger the integration.

• URL Matching:

Click the + ADD TRIGGER button to select this option. To match multiple URLs, you can add an asterisk (*  ) at the end of the URL. This will apply the trigger to all URLs that begin with the specified path.

🧠 Tip: Ask your web developer team to help identify the exact CSS selector on your website page if you’re not sure how to configure this, or reach out to support@jobpixel.com for additional assistance.

3. Display

This defines where on the page your content will appear.

• CSS Selector:

  Enter the unique CSS selector of the section where you want the content to be inserted.

  👉 Example: .job-description-heading  

  🧠 Tip: This value with be unique to your website's design.

This ensures JobPixel inserts the content in the correct visual spot on the page.

4. Embed

Choose the content you want to display.

• Under the Embed section, select a video, image, job or widget from your JobPixel library
• Choose the layout (e.g., Float Right, Align Left, Centered)
• Set a size — 300 is a common width for a sidebar video

You can update these values at any time to swap the video or change its position.

5. Publishing Status

You have three options:

• Off: Nothing will appear on your site, even if a match is found.

• Testing: Only shows content if someone visits a page with the JavaScript code from Step 1 added, and the jobpixelwebconnect  query string parameter is added to the page URL:

  👉 Example: https://www.yoursite.com/yourpage?jobpixelwebconnect  

  🧠 Tip: If your page URL already has a '?' in it, you will add this parameter separated by an '&' instead. https://www.yoursite.com/yourpage?tracking_code=xzy&jobpixelwebconnect  

• On: Fully live. Everyone a page will a matching rule will see the content.

Start in Testing mode to preview the setup.

Troubleshooting tip: If your WebConnect rule matches but no content appears, check the browser console for CSP or CORS errors. Your web developer may need to update your site’s security settings to allow JobPixel resources.

Step 3: Save and Duplicate (Optional)

Once your config is complete:

1. Click the Save Integration button at the bottom
2. Then click the dropdown carrot (v) to the right
3. Select Save and Duplicate if you want to create a new rule using the current rule as a starting point.

🔄 What the User Will See

1. User visits a page with a matching rule (e.g., a heading title containing “Physical Therapist”)
2. The WebConnect rules check the page for the CSS selector and string match
3. If matched, the content from your library will be automatically inserted into the job page — no clicks or redirects required
4. User can watch the content inline, giving them a more engaging, branded experience

Troubleshooting Security Restrictions (CSP / CORS)

On some websites, security settings can prevent WebConnect from loading or inserting JobPixel content correctly. This is most common on sites with strict Content Security Policy (CSP), cross-origin restrictions, or security tooling managed through a CDN, firewall, or tag manager.

If your rule is configured correctly but the content does not appear:

1. Confirm the WebConnect JavaScript code is installed on the page
2. Test the page using the jobpixelwebconnect query parameter
3. Open the browser console and network tab to look for blocked or failed requests
4. Ask your web developer or IT/security team to allow the JobPixel resources required by your embed code

If you need help identifying what should be allowed, contact JobPixel support and include the page URL plus any browser console errors.

💡 Final Tips

• Want to scale this across different pages ? Just duplicate the rule and update the match rules.
• If you're unsure about identifying CSS selectors, your JobPixel rep or your web team can help get you started.