How to add Images/Videos to your Onboarding Packet?

Are you considering including an image somewhere in your New Hire Onboarding Packets? Adding an image to your Onboarding Packet can benefit your organization by reflecting culture, branding, as well as grabbing your New Hire's attention. Follow the guide below to learn how to embed a hosted image in your packet template.

In this article:
Navigate to an Onboarding Packet
Add an Image to your Onboarding Packet
Add a Video to your Onboarding Packet
Video and Image F.A.Q.
Additional Resources

Navigating to an Onboarding Packet

1. From the dashboard, Click Tools then Click Setup.
2. From the Setup Menu, Click New Hire Packet Template.
3. From the New Hire Packet Template dashboard, select the Hire Packet you would like to edit or create a new one.

Adding an Image to your Onboarding Packet

What is a Hosted Image?

A hosted image is an image that is stored on a server. This means that the image cannot just exist as a file on your desktop - we have to be able to link to the image itself. Therefore, it must be hosted by someone online and retrievable through a URL.

Where Can I Find a Hosted Image?

Because you are placing an image into an HTML field (the system text fields you are able to edit in the packet), the image in question has to be hosted online. For example:

• The image could be hosted on your company website.
• The image could be hosted on a third-party image hosting service like Imgur.

You can also request for ClearCompany to host your image for you. Please reach out to ClearCompany Support or your ClearCompany Representative.

Adding an Image

Please Note:

An image can only be added to an Instruction Tab

1. Retrieve the image URL
   1. Right-click on the image in question on the hosting website.
   2. Select Copy Image Address.
   3. The image URL will now be copied to your computer's clipboard.
2. Placing the image URL into the embed code

   1. Your embed code is:

      <iframe src = "[[IMAGE URL HERE]]" />

3. Replace the text: [[IMAGE URL HERE]] with the image URL you just retrieved.

   (Make sure to keep the quotation marks!)

4. Embedding the image in your Onboarding Packet Template
   1. Navigate to the New Hire Packet Template in question.
   2. Select the tab you would like to add an image to.
   3. Click on the Instructions area of the tab (rich text area at the top of the tab). If you are embedding directly into an Informative tab, click into the text editor in the main body of the tab. 
   4. On the formatting bar that appears, click the HTML button.
   5. A pop-out HTML box will appear. If you have existing text in the field, determine where you would like to add the image. Paste the code you just copied in the desired location.
   6. Click Update at the bottom of the popup.
   7. Click Done Editing in the lower right-hand corner of the text editor to finish and save your changes.

Adding a Video to your Onboarding Packet

Host the Video

Because you are placing a video into an HTML field (the System Text fields you are able to edit in the packet), the video in question has to be hosted online.

1. Videos are typically hosted on websites like YouTube or Vimeo.
2. The instructions for this article will cover both of these sites. If you are hosting the video elsewhere, you will need to defer to the hosting site for information on how to retrieve the Embeddable Video URL.

Note: The video cannot just exist as a file on your computer - we have to be able to link to the video itself. Therefore, it must be hosted online and retrievable through a Embeddable Video URL.

Retrieve the Video URL + Embed Code

Acquiring a YouTube Embeddable Video URL:

1. Locate the video on YouTube you wish to embed.
2. Select Share below the video.
3. Select the Embed Option from the dialogue box that appears.
4. Copy the Embed Code on the right-hand side.

Acquiring a Vimeo Embeddable Video URL:

1. Locate the video on Vimeo you wish to embed.
2. Select Share below the video.
3. Copy the Embed Code from the dialogue box that appears.

Embed the Video in your New Hire Packet Template

1. Navigate to the New Hire Packet Template via Tools>Setup>New Hire Packet Templates.
2. Select the Task in which you would like to embed the video.
3. Select the Instructions Area of the Task (Rich-Text Area at the top of the Task), then select the HTML Button.
4. If you have existing text/code in the field, determine where you would like to add the video. Paste the Embed Code you copied from the hosted video in the desired location.
5. When finished, select Update at the bottom of the HTML Source Editor.
6. Select Done Editing in the lower right-hand corner of the Text Editor to save your changes.

Video and Image F.A.Q.

Is your image small and/or has scroll bars?

If the image appears too small or has scroll bars, you can add code to specify the height and width of the frame of the image. This will remove scroll bars if the iframe is large enough for the image. Note: The height and width are measured in pixels. To do this, take the copied image URL from Step 2, and place it within this code:

1. <iframe width="[[WIDTH HERE]]" height="[[HEIGHT HERE]]" src = "[[IMAGE URL HERE]]" />

2. In the example code below, 250 is the default value for height and width. You can replace the number 250 in either of these places with the number of pixels of your choosing:

3. <iframe width="250" height="250" src = "[[IMAGE URL HERE]]" />

My Video is Too Small and/or has Scroll Bars!

If the video appears too small or has scroll bars, you can add code to specify the height and width of the iFrame of the video. This will remove scroll bars if the iFrame is large enough for the video. Note: The height and width are measured in pixels.

1. In the iFrame Code below, the 315 and 560 are the default values for the height and width of the video player, respectively. You can replace the number in either of these places with the number of pixels of your choosing to increase or decrease player size.
2. 

How can a new hire sign off they have watched the video?

If you want the new hire to sign off that they have watched the video, add the video to an information tab and add a second document tab asking for their signature on the video completion.

Additional Resources

How to set up onboarding