Career Site Widget - Custom Styling and Embedding

We’ve provided the ability for users to include a simple HTML job layout in their standalone careers website. This new embedded script can act as a replacement for the iframe implementation and provides a more straightforward and customizable implementation for anyone who wants to easily style jobs within their websites. In this article, we delve into the ways you can customize your career site.

In this article:
Implementation
Customizing the look and feel
Source Tracking
Troubleshooting
Additional Resources

Implementation

In order to implement the embedded career site, you will need to add our JavaScript script tag to the target HTML page.

Example:

<script type="text/javascript" src="{baseUrl}/js/v1/browser-check.js?clientId={orgShortName}"></script>

Required attributes
There are two values to replace in the script snippets above:

• {orgShortName} should be replaced with the short name of the organization (or the child brand short name if this is a child brand)
• {baseUrl} should be replaced with the base URL, and it will depend upon the environment we are running against.

Customizing the look and feel

By default, some basic styles such as the font size/family and link styling should inherit from the parent’s CSS. Should more customization be desired, clients can target our CSS classes and override the styles we have provided.

Embedded HTML class layout

The injected HTML is comprised of a main cc-careers-container that has 3 child containers:

Search/Filter	cc-filters-container
Job Portal/Sharing	cc-portal-share-container
Jobs List	cc-jobs-container

Within each child container, you’ll find various components that have their own HTML element classes to allow for convenient style customization. A detailed class hierarchy is below.

Class Hierarchy

Default Styling

We created a default styling for our embedded site so that any client who does not have the time/expertise to design and override the jobs list styling will get a quality jobs page experience.

Example

Styling Override Examples

Filters & Job Portal / Social Sharing

Below, you’ll find an example of how a client can override the filter components of the embedded jobs page. We’ve also provided a code example of the content of the CSS file.

Elements

.cc-filters-container {
background: #ab0432;/*burgundy color*/
border-radius: 1.125em;
}

.cc-filters-container input,
.cc-filters-container select {
background: #fff2d0;
color: #47a76e;
}

.cc-filters-container .cc-submit-search-button {
color: #fff;
background: #47a76e;
border: 1px solid #47a76e;
text-decoration: none;
box-shadow: 1px 1px 2px #000;
}

.cc-filters-container button.cc-reset-search-button {
color: #fff !important;
}

Filter Class Details

In this example, we’re updating all of the "input" and "select" elements within the filter container. If we want to only update the keyword search, we can update our CSS to specifically reference the "cc-keyword-wrapper".

Each search component has its own class reference for more detailed targeting. In the example above, the following classes exist for their respective filters.

Summary	Element
Keywords	cc-filter-keywords
Location	cc-filter-location-input
Department	cc-filter-department-input
Brand	cc-filter-brand-input
Postal Code	cc-filter-postalcode-input
Postal Code Radius	cc-filter-postalcode-radius-input

Social Sharing

Along with searching, we also provide the ability to navigate directly to the company’s job portal and share job searches. The element classes and summary are detailed below.

Summary	Element
HTML div containing the job portal content	cc-job-portal-container
Text displayed articulating the job portal	cc-job-portal-link-text
The link element navigating users to the job portal	cc-job-portal-link
HTML div containing all of the sharing links	cc-share-container
Header directing users to sharing links.	cc-share-header-text
All elements related to sharing a jobs board/job detail will have this class.	cc-share-link

Jobs list

The jobs are contained in the "cc-jobs-container" element and are grouped by their respective ClearCompany departments. Our jobs list also supports paging. For now, paging size is hard-coded, with the intention of implementing the ability to customize job page features.

Element

.cc-careers-container .cc-current-page, .cc-careers-container .cc-page-control:hover {
color: #fff;
background: #47a76e;
border: 1px solid #47a76e;
text-decoration: none;
box-shadow: 1px 1px 2px #000;
}

Jobs Class Details

Above, you’ll see we are overriding "cc-current-page" and "cc-page-control" to display the website's custom green background/white text styles within the pagination component. For more granular control, users can create a style block for the classes below.

Summary	Element
HTML div containing the department name and all jobs associated with the given department (within the current page).	cc-department-container
Displayed company department.	cc-department-name
HTML div that contains an individual job’s content	cc-job-container
Displayed job title	cc-job-title
Displayed job location	cc-job-location
HTML div containing the pagination controls	cc-page-controls
Control for navigating back one page	cc-left-control
Control for any numerical page representation. Any class with the following is clickable and will navigate you to the displayed page.	cc-page-control
Control for navigating forward one-page	cc-right-control
Non-clickable element representing a gap between displayed "cc-page-control" elements	cc-ellipsis

Job Details

Along with the jobs listing and filtering, we are providing a set of classes for client admins to override for the job details page. The structure of the HTML element classes is below.

Summary	Element
Page Colors	/* site-defined style overriding content added via embed */ #page-content a { color: #ab0432; text-decoration: underline; }
Text and Font	#page-content h3 { margin: 1em 0 .25em 0; /*color: #4286b5;*/ color: #AB0432; font-size: 1.25em; line-height: 1.0em; /*font-family: 'Raleway', verdana, 'Trebuchet MS', Helvetica, Arial, sans-serif; font-weight:400;*/ font-family: 'Vollkorn', serif; font-weight: 800; font-style: normal; text-transform: uppercase; letter-spacing: 0.03em; }
Links	/* cc specific class overrides */ .cc-job-description-container a.link-button { text-decoration: none !important; color: #fff !important; }
Top-level HTML element containing all job description content	.cc-job-description-container .cc-apply-button { color: #fff; background: #47a76e; border: 1px solid #47a76e; text-decoration: none; box-shadow: 1px 1px 2px #000; }

Override example

Class details

Summary	Element
Helper link for user to navigate back to the jobs list	cc-back-to-jobs-button
Displayed job title	cc-job-description-title
Displayed job location	cc-job-description-location
Shares the element of job location	cc-description-secondary-label
Element containing Apply link and sharing capabilities.	cc-apply-share-container
Navigates user to the selected job’s ClearCompany application	cc-apply-button
Displayed job description. Note - We allow HTML markup when writing job applications. Keep this in mind regarding class/element styling references	cc-job-description-text

Source tracking

The embedded careers page supports source tracking for global sources and custom sources in two ways. If no source tracking is provided, applications will be attributed to the public career site.

Via a URL query parameter, e.g.:

• JB={globalJobBoardId}
• CS={customSourceId}

Via a data attribute on the embed script:

• data-default-source="JB-{jobBoardId}"
• data-default-source="CS-{customSourceId}"

---

Troubleshooting

Supported Browsers

Our JavaScript embed works only in modern browsers, such as the latest versions of Edge, Chrome, Firefox, and Safari. It does not support Internet Explorer or some older mobile browsers. You can embed the script on a webpage in two ways: either with a browser support check that shows an error if the browser is unsupported, or without it.

By default, if a user opens the page in an unsupported browser, this message appears:

• Job listings are not supported on Internet Explorer or Opera Mini. Please try other browsers.

To customize this message, set the value of the global variable unsupportedBrowserMessage:

• window.unsupportedBrowserMessage = "Your browser is not supported. Please email [e-mail] to submit your resume.";
• This script handles loading the job board as well (i.e., there is no need to include the other script).

Embedded script without browser support check

• <script type="text/javascript" src="{baseUrl}/js/v1/career-site.js?clientId={orgShortName}"></script>

---

Errors

“We are having trouble loading the page. Please try again later.”

If you see a “We are having trouble loading the page” error, browser developer tools may show JavaScript or CORS errors. Most often, this problem is caused by the website configuration, not ClearCompany.

ClearCompany’s CORS setup already supports embedded career sites and does not require additional configuration on our side. This error usually means the site is blocking API requests because CORS headers are missing or incorrect.

A common error message is:
“No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”

This means the web server is not allowing requests from the ClearCompany API.  Your web team must explicitly allow the request origin using the Access-Control-Allow-Origin header.

To fix this issue, your web team should:

• Verify the embed script is correct and includes a valid siteId.
• Add the ClearCompany API origin to the site’s CORS allow list.
• Confirm the script is not being modified by the CMS or page builder.

Additional Resources

Create or Manage an Embedded Career Site
Career Site Customizations
Career Sites

Please see the attachment below for the information above in PDF format.