Developer Information

• Functionality Overview
• Adding/Editing Quote Items
• Adding/Editing Video Items
• Removing Items
• Creating New Sliders

Overview

• Updated February 2022 for TCDQ-65795. Quotes and videos no longer appear together in the sliders. There are now video sliders and quote sliders with mappings that are independent of each other. Creative was updated for both quotes and videos. The new creative now allows for all text and play buttons to be brought in programmatically. The number of slides assigned to each slider is no longer important.

• To see which items are mapped to which slider view the Quote Slider Mappings and Video Slider Mappings sections.

• To see what each item looks like in a list, view the View All Slides (Quotes and Videos) section.

• All data is hardcoded within the Default Theme JS file (within the videoItems or quoteItems objects). The slider does not leverage career site filter assignments from the admin nor receive data dynamically from the Altru API. Personalization cannot be used for this element.

• Sliders will choose which items to display based on mapping value first. If there is not enough mapped content, X amount of randomly chosen slides will appear until the total number of slides requested is reached. If a slide is already being used in the slider, the script knows to not pick it.

• Each mapped item will have an opportunity to display in its corresponding slider. (Example: say you have 7 videos mapped to "video-nursing-slider" but have chosen to only have 6 videos display in the slider. The 7th item will still have a chance to be shown because the "video-nursing-slider" mappings are shuffled before displaying).

• You may add multiple mappings to an item. (Example: an item could be mapped to "video-nursing-slider, video-benefits-slider, and 'video-grads-slider'" and it would work fine.)

• All items are eligible to be displayed in the randomized slider. Do not add a mapping value of "video-random-slider" to the videoItems object or "quote-random-slider" to the quoteItems object. This functionality is programmed by default.

• There are a couple of people who have multiple quotes or multiple videos. If for example, you need to change someone's job title and they have multiple videos, the job title will need to be changed for each of their records in the videoItems object. This same idea applies to quotes as well.

Adding/Editing Quote Items

• The Account Team will need to provide first name, last name (optional), job title, quote, and any mappings needed.

• Add a new item in the quoteItems object with all of the properties and their corresponding values you were given. If there is a property that you dont have a value for, set it to be an empty string. You must create a unique "quoteId" for each new item. Most of the time you'd just enter the next sequential number, but check to make sure it hasnt been used already.

• Look at the sliderConfig object to see the available slider mapping values. Make sure you are entering in the correct string for the mapping value for each quote. All quote slider mappings should be prefixed with "quote-". Case and spelling are important.

• Creative specs: Provide headshots only - there should not be text baked into the image. Rounded corners are added via css code. PNG file format is fine. The size of the thumbnails should be 368px wide X 523px tall.

Adding/Editing Video Items

• The Account Team will need to provide at least the Altru Video ID found in the api https://api.altrulabs.com/api/v1/answers?client_id=128. Preferably they would provide you a document with this information: First name, Last name, Job title, Video URL, Video VTT URL, any mappings needed, and Altru Video ID. If any of this information (except mappings) is missing, use the Altru api link to find it by searching with the Altru Video ID.

• Add a new item in the videoItems object with all of the properties and their corresponding values you were given. If there is a property that you dont have a value for, set it to be an empty string.

• Look at the sliderConfig object to see the available slider mapping values. Make sure you are entering in the correct string for the mapping value for each video. All video slider mappings should be prefixed with "video-". Case and spelling are important.

• Creative specs: Provide headshots only - there should not be text/video buttons baked into the image. Rounded corners are added via css code. PNG file format is fine. The size of the thumbnails should be 366px wide X 468px tall.

Removing Items

• To remove a mapping, simply edit the items "mapping" property value in the videoItems or quoteItems objects. Leave it as an empty string if there are no longer any mappings.*

• *Any item is eligible to appear as a random slide in both the randomized slider (quote and video versions) AND as an extra item if there arent enough mappings for the requested amount of slides to show. There is not a way to exclude an item from being eligible as random.

• If an item needs to be completely removed, delete it from the videoItems or quoteItems objects.

Creating New Slider Versions

• The basic html code for a slider is as follows:

<div class="we-are-sharp" data-video-DESCRIPTIVE-NAME-slider>
    <section class="we-are-sharp__content">
        <h2> class="we-are-sharp__hl">We are Sharp</h2>
       <div id="we-are-sharp-slider"></ div>
    </section>
</div>
                

• The data attribute is the slider mapping value you will assign to your data (declared in the sliderConfig object) with a "data-" prefix. The mapping value should be prefixed with "video-" for a video slider and "quote-" for a quote slider.

• The empty div with an id we-are-sharp-slider tells the script where to inject the slides

• You cannot have multiple sliders on a page.