- The customer provides images by granting access to an image library, logging in to a photo site (similar to photobucket.com), or a zip file of images.
- See "Image Recommendations" in the Setting Up and Maintaining SAP SuccessFactors Recruiting guide in the SAP Help Portal for specific size recommendations for each available component.
- A minimum of 15-20 high-resolution employment brand images is required.
- The following media types can be used in Career Site Builder: GIF, ICO, JPG, JPEG, PNG, and SVG.
- Scalable Vector Graphics (SVG) images render correctly regardless of display or layout size. For this reason, a single SVG image of the customer’s logo can be used for desktop and mobile layouts of the career site.
- All Career Site Builder images should be oriented as landscape, not portrait.
- For background images, choose subtle patterns and colors.
- Text on images is a dated web practice and is not recommended.
- Image sliders are not a recommended practice.
- The maximum file size for images is 500KB.
- Optimizing images is highly recommended as it decreases load speed, improving the site's performance.
- We recommend that your media resource export the selected images specifically for the web.
- An image program such as Photoshop (or even Paint or Snagit) can be used, or free image compressors are available on the web, such as GIMP or PicMonkey.
- If you need assistance delivering web-ready images, SAP’s web design team can help prepare your image files.
Customizing Career Site Builder (CSB) Settings and Styles
Objectives
After completing this lesson, you will be able to:
- Describe global settings.
- Describe global styles.
Image Recommendations
Global Settings
- Using Career Site Builder, you can update the configuration for the site as a whole using the Global Settings and Global Styles menus, located under Appearance. These settings control site-wide elements like headers, footers, button color, etc.
- Additional site-wide settings are located under Tools, Settings, and other menus.
Global Settings – Cookie Manager
Career Site Builder allows you to configure the following:
- A cookie banner, which appears at the bottom of the page when visitors first go to your career site (see the figure below.)
- The cookie consent manager, which appears as a dialog when visitors choose to modify their preferences from the cookie banner. The dialog allows candidates to view descriptions of the cookies used on your career site and accept or decline them.
- The ability to link to the cookie consent manager in either the header or footer of every page in your organization's career site designed by Career Site Builder.
Global Settings – JavaScript
- From the Header and Footer JavaScript area, you can enter custom JavaScript for tracking purposes (e.g., Google Analytics, landing page optimization, third-party analytics, etc.)
- Do not enter any other information in the JavaScript boxes; other uses are not supported.
Site Information
- From the Settings → Site Configuration → Site Information page in Career Site Builder you can view the Site ID, and view/update the Site Name, Company Name, and Site URL. See definitions for these fields in the Setting Up and Maintaining SAP SuccessFactors Recruiting guide in the SAP Help Portal. Next to the Site URL setting, click Go to view the career site.
- If available, your webmaster IDs for Google and Bing are entered.
- Entering a Google Tag Manager ID enables Google Tag Manager for the career site, but it does not manage the tags or perform any analysis or reporting. If the ID is obtained from Google and added in this field, Career Site Builder incorporates the necessary code in the career site for the customer to use Google Tag Manager.
- Enabling Use Google Tag Manager in Career Site Wrapper adds Google Tag Manager to all pages that use the career site wrapper (for example, the Candidate Profile page).
- When you provide the Google Analytics ID, enabling Use Google Analytics in Career Site Wrapper adds Google Analytics to all the pages that use the career site wrapper (for example, the Candidate Profile page).
- Your implementation consultant is responsible for delivering sitemap links; they only need to be updated if your domain name changes.
- Candidate Relationship Management is enabled on the Site Information page, and the Candidate Relationship Management Customer ID is displayed here.
- Learn more about metadata later in this course.
Search Engine Optimization (SEO) Settings
- Search engine optimization (SEO) settings can be refined from Settings → Site Configuration → SEO Settings.
- By default, CSB generates a Top Jobs page that lists links to search results pages based on the most frequently searched terms. This setting can be disabled to have better control over how jobs are presented in your career site.
- You can also demote specific terms to display at the end of the result set, prevent search engines from indexing jobs with certain terms entirely, and control whether search engines index user-generated search page links.
Global Styles
- Access Global Styles from Appearance → Styles.
- The main sections on the Global Styles page are as follows:
- Global Styles
- Headers
- Footers
- Expand each to view the brands and locales configured in Command Center. (Locales are set up at the end of the project and so are not shown here.)
- The Main Brand displays if the system does not recognize a brand. When building pages in CSB, the Main Brand page is created and duplicated for the other brands, making any necessary changes.
Main Styles
- The Main tab allows you to adjust the colors for the main areas of the career site and upload images for the site as a whole and main content areas.
- To open the Color Palette menu, click on any existing colors. Use the Add icon at the top of the Color Palette menu to add new colors to the palette. Click the Archived button at the top to view colors that have been previously removed. Note that a color used on the site cannot be removed.
- To replace an existing color, click on the color and then click the Edit icon. Be aware that the color menu auto-saves! So unless you intend to replace color throughout the CSB site, click Add to begin.
- Enter a Label for the color, if desired. Create a new color using the color picker grid or enter an RGB, HSV, or hex code value. To create a color gradient, check the Is Gradient Color box and select the two colors you want to make the gradient.
- Use the bottom slide to adjust how opaque the color will be on the site (in other words, whether it is a solid color or you can see through it).
- You can upload images for the site and content pages using the Main page. Images uploaded as the Site Background Image serve as the background for the entire site. Images uploaded as the Content Background Image serve as the background on any content pages.
- You can upload a Favicon for each brand. A Favicon is a small rendering of the brand identity/logo. It is most often applied to a website to be displayed on a browser address bar next to the page URL address and next to the page’s name in a list of bookmarks when the candidate bookmarks a page.
Meta Images for Social Media Posts
- Customers can add meta images from the Global Styles Main page to associate them with your career site in social media posts.
- Some third-party sites, such as Facebook, LinkedIn, and X, formerly known as Twitter, allow you to associate an image when you post a link and information for your career site.
- The Meta Image setting allows you to specify one image per brand, so any branded pages within the career site will contain the same meta image.
Header Details
- Configurations are made for each language and brand from Appearance → Styles → Headers. Several options are configured on the Details page.
- Choose whether to always display the header on Desktop devices, select where the logo is displayed, and determine whether the header is to extend the full width of the site or centered.
- From Header Style, you can configure a Custom header. Details are included later in this section.
- If a Custom header is not selected, you also enable the sign-in widget and locale selector from this page.
Header Links
- To add the header links, click Add and select the type of link you want to add.
- Additional details are discussed in the SAP SuccessFactors Recruiting: Candidate Experience Administration course (HR832).
- Category link: Links to existing category pages.
- Content: Links to existing category pages.
- Cookie Consent Manager: Opens the Cookie Consent Manager.
- External: Links to external sites or other pages in the career site.
- Home Page: Links to existing home page. When brands are enabled, the Home Page link takes the user to that brand’s home page.
- List: Displays a dropdown link.
- TC Join: Links to subscribe page (Join Talent Community).
- Top Jobs: Only used in the footer. The Top Jobs page contains system-generated pages corresponding to the top job searches that direct users to the career site.
- View All Jobs: The out-of-the box setting is only used in the footer.
Custom Header
- Customers can select additional customization options for the header by selecting Header Style: Custom from the Details page.
- A different header layout can be configured for each brand and locale, as well as desktop and mobile devices.
- Customers can mix custom and default header styles on their career site.
Custom Header Example
- In this example, the customer requested that the Logo appear at the top left, with the Menu options to the right. Below that, a Line was added across the full width of the page. Below the line, a Text box was added in the center of the page, with the Sign-in and Language component to the right.
- The components that can be added to a custom header are shown here.
- The logo for a custom header can be added from either the Logo component or the Image component. To use a logo that is optimized for different display settings (such as desktop and mobile), use the Logo component.
- The Sign-in and Language component is required.
Footers Row Menu or Column Menu
- Select either Row Menu or Column Menu to add links to the Footer.
- In the example shown, both the Row Menu and Column Menu have been configured.
- The same link types that can be used in the header are available for the footer.
Social Links
- Social Links are presented in the footer.
- In the Social Links area, add the desired links and enter the company’s preferred URL for their social networks.
- Best practice only includes social networking links specific to job seekers.
Mobile Apply
- Career sites created with Career Site Builder support Mobile Apply.
- Mobile Apply supports the ability to search for jobs, create and manage a profile, and complete the job application process using mobile devices such as a smartphone or a tablet computer.
- When Mobile Apply is enabled, the Candidate Profile and Application are consolidated into a single page. In the example, notice that a resume and cover letter (and other attachments) can be submitted.
- Note that when Mobile Apply is enabled, candidates will visit Jobs Applied from the Candidate Profile to view their status in the application process.
Microsites and Brands
- Job branding can be consistent across SAP SuccessFactors Recruiting by associating microsites with brands. This allows a user to view a job on the CSB career site, apply for the job, and have the same brand experience.
- The brands control the accordion colors during the application process:
- Accordion & button color (Navigation background color)
- Accordion hover color (Navigation hover color) – shown at the top of the screen captures
- Text on Accordion (Navigation menu Text color)
- The wrapper pulls the header, footer, and a few other styling elements so the candidate doesn’t notice that they went from one system to another.
Translations Overview
- The Translation menu allows you to override default (system) text for site elements for any locale.
- After you've changed the text, it appears in the translation grid. Default text appears in italics, and new labels appear as regular text.
- You can import and export your custom translations from this page. These are performed separately from the site import and export.
Log in to track your progress & complete quizzes