Configuring Chapters

The 'About' page

The ‘About’ page is your opportunity to describe the purpose of your Chapter and what it can do for your audience. It will appear in the ‘About’ section of your Hijack Chapter in the front end for all site visitors to see. Click on the ‘About’ tab to configure.

The free-form WYSIWYG editor here provides a word-processor-type experience which accommodates text in various basic styles as well as media. Add bullet points, numbered lists and text in bold and italics. Quotes and hyperlinks are also possible. Explore the options in the toolbar for yourself and let us know if you get stuck!

Nicenames

‘Nicenames’ are a neat way to customise the front end labelling for your chapter tabs. The below article describes the earliest incidence of Nicenames in the ‘Chapter Options’ tab but the same principle applies throughout the Chapter settings. Whenever you see ‘Nicename’, you have the opportunity to personalise your front end labelling!

By default, the tab which lists your Hijack Chapters as selectable buttons on the front end is labelled ‘Discover’. The Chapter names listed here are automatically pulled from the Chapter titles in WordPress. However, you can define your own Nicenames for either of these elements if you wish to customise their front end labels. In the recording below, you can see how the front end Hijack appears before and after updating the Nicename fields.

Testimonials

It is really simple to feature Testimonials in your Hijack. However, if you haven’t already read the guides on compiling Testimonial entries, we’d recommend you do so if the below does not make sense. This is because this feature ‘pulls in’ single entries from the Testimonial database which you will need to begin compiling before you can add entries here. If you already have some Testimonial entries compiled, please read on.

As the above video demonstrates, you can feature Testimonials to your Hijack inside the ‘Testimonials’ tab of the Hijack’s setup page. Simply click inside of the empty field here and choose the relevant Testimonial in the dropdown. Your database of Testimonials will likely be a lot bigger than ours here! In this case, you can begin typing in this field and the dropdown list will update with Testimonials relevant to your search. Click on a Testimonial title to feature it in your Hijack. You can add as many Testimonials as you like here. You can also remove a Testimonial by clicking the ‘x’ on the lefthand side of its name in the field.

Courses

It is really simple to feature Courses in your Hijack. However, if you haven’t already read the guide on compiling Course entries, we’d recommend you do so if the below does not make sense. This is because this feature ‘pulls in’ single entries from the Course database which you will need to begin compiling before you can add entries here. If you already have some Course entries compiled, please read on.

As the above video demonstrates, you can feature Courses to your Hijack inside the ‘Courses’ tab of the Hijack’s setup page. Simply click inside of the empty field here and choose the relevant Course in the dropdown. Your database of Courses will likely be a lot bigger than ours here! In this case, you can begin typing in this field and the dropdown list will update with Courses relevant to your search. Click on a Course title to feature it in your Hijack. You can add as many Courses as you like here. You can also remove a Course by clicking the ‘x’ on the lefthand side of its name in the field.

Configuring Live Chat

Live Chat exists in Hijack on a chapter by chapter basis. This means you could have several chats running within your Hijack each with its own Start and End times. You can add one chat per Chapter.

If you’re adding Live Chat into your chapter, the setup couldn’t be easier. Visit the ‘Live Chat’ tab to configure.

The date picker here will be familiar to you from setting the Start/End times of the Hijack itself if in the ‘Features’ panel. It is worth noting that Live Chat has its own start/end times independent of the Chapter it sits within. For instance, your Hijack could run on a specific day between 1pm and 2pm but you might choose to have Live Chat active on a Chapter within your Hijack for only a portion of that time: 1.20pm – 1.40pm for example.

You have the option to add a ‘Pre-Live Message’ which will appear to your audience in the chat tab before it is available to use. There is a handy #date# placeholder function which will pull in the chat’s start date automatically if you would like to include this as part of your message.

Configuring Chapter options

The first tab in the ‘Chapter Details’ form form is labelled ‘Chapter Options’. This is where you’ll decide which content sections you’d like to feature as part of your Chapter on the front end.

Below the ‘Nicename’ options, you’ll see a dropdown underneath the title ‘Chapter Options’. Any items selected here will be added to your Hijack. You’ll notice that tabs in the form’s sidebar will appear for items that have been selected and will disappear if unselected. Visiting the tabs later will enable you to customise the features for each of your required sections.

Adding Video

Where can I add video?

You can add Video in two different places for use in your Hijack. Most often, you’ll be using the options found in the ‘Video’ tab to configure the background videos when setting up each Chapter. However you can also add a video intro for users to see when they first open your Hijack (before they begin browsing chapters).

Types of video

The system can accommodate both Standard and 360 video files hosted either on the WordPress site itself or on an external platform. Hijack even supports live streams from Facebook and YouTube, which we cover in a separate tutorial here.

Hijack offers the unique possibility of adding a ‘tour’ timeline enhancement to your 2D and 3D videos. Select either ‘2D Tour’ or ‘3D Tour’ to reveal a new set of options below. Please read the article on ‘Adding Spotlights to Video Tours’ for more detailed instructions on this.

Externally, or Hijack-hosted video?

Once you have chosen the relevant video type in the dropdown, use the ‘External Video’ toggle to specify where the video exists. Toggle ‘No’ if the video is to be uploaded to the WordPress Media Library or ‘Yes’ if the video is hosted elsewhere.

If toggled ‘Yes’, the final field will prompt you to type in the URL of the video. If toggled ‘No’, an ‘Add File’ button will appear allowing you to select a previously-uploaded video from the site’s Media Library or to upload a new video from your local computer.

Working with YouTube videos

For introduction videos, we are able to leverage the iframe API. This allows us to append url parameters to make the video do things we want it to.

In a lot of cases you will want to change the default URL for these YouTube embeds to contain some common parameters. Here is a example of the standard URL:

https://www.youtube.com/embed/yWsFXT904bg

And here is the same URL after applying some common parameters:

https://www.youtube.com/embed/yWsFXT904bg?autoplay=1&mute=1&loop=1&playlist=yWsFXT904bg&modestbranding=1&rel=0

Let’s take a look at what they do:

• autoplay=1&mute=1 – This makes your video play automatically. Most browsers will not autoplay a video unless it is muted.
• loop=1&playlist=yWsFXT904bg – This makes the video loop, but youtube demands that you also pass the video ID through as a playlist parameter too. Don’t ask us why, it’s super weird, but it’s documented on the iframe API documentation.
• modestbranding=1 – This doesn’t doo too much, but tones down the references to YouTube
• rel=0 – This removes related videos from other brands. If shown (it would only show if you weren’t looping) you would see related videos from the same channel.

Adding Unibuddy to your Chapter

You can add a Unibuddy section to your Chapter, using Hijack. You will need to purchase the Unibuddy extension in order to use this functionality.

1. In Unibuddy
   1. Navigate to Integrations > Code Snippets > Buddy Cards
   2. You can pick either students or staff. For the purposes of this tutorial, we will use Students. You can jump directly to this section in Unibuddy using the following link: https://university.unibuddy.co/snippets/buddyCard/student
   3. Under “Buddy Card – External Snippets (For external sites, NOT UNIVERSITIES)”, choose a degree, mentor or country.
   4. Copy the URL (highlighted below) from the iframe tag

2. In Hijack
   1. In your Chapter, enable the Unibuddy option.
   2. In the Unibuddy tab, insert a Unibuddy URL and save your Chapter.Company Registration: 07405582

Add Spotlight content to your video

This is a powerful tool which allows you to provide extra insight, while also empowering your users to skip around in the timeline to find the content they care about most.

One of the key features helping Hijack to stand apart from other media-rich online experiences is the opportunity to add a timeline to videos. This allows you the possibility to add more narrative context to what your users are seeing and it means that the users themselves can easily click through to different segments of the video in order to find what is most relevant to them.

Whether adding an intro or chapter video, choose ‘2D Tour’ or ‘3D Tour’ in the video type dropdown in order to begin configuring your timeline.

This will enable the ‘Experience Timeline’ configuration at the bottom of the screen. Here you can add the start and end points (in seconds) for your Spotlight sections. In the recording above, for example, the spotlight labelled ‘Accommodation’ will last from the point 8 seconds into the video until the point 40 seconds into the video (so 10 secs in total). For the length of this duration, text you insert into the ‘Contextual Content’ field will display in the ‘Spotlight’ tab in the front end of the Hijack.

Adding contact information

Use the ‘Contact Information’ configuration settings in order to let your audience know how to get in touch with you or where to go to find out more information.

Adding/removing entries

This section consists of a simple repeater form. Click the blue ‘Add new contact’ button to begin adding new line items to the form. Once one contact entry is added, you can continue adding more with the blue button or use the plus (+) and minus (-) buttons to add or remove rows. You will see your Contact entries numbered in the left hand column of the table.

Entry types

Each entry consists of a ‘Type’ dropdown and a second configurable field which will change depending on the contact ‘Type’ selected. The three types you can choose from are ‘External Link’, ‘Phone Number’ and ‘Email.

External link

If the ‘External Link’ type is selected, a button will appear below which will prompt you to ‘Select link’. You can specify the destination URl for your link in the ‘Insert/edit link’ window and also customise what you’d like the ‘Link Text’ to be. The video example demonstrates that any front end users visiting our demo Hijack would see the text ‘SMILE’s site’ which, when clicked, would send the user to http://www.wearesmile.com – The ‘Open link in a new tab’ checkbox below specifies whether or not the URL will open in a new browser tab.

Phone number

Selecting the ‘Phone Number’ type will bring up a field labelled ‘Number’ below. Simply type in a valid telephone number into this field. Front end users will be able to click or tap this number in order to begin a call.

Email

Selecting the ‘Email’ type will bring up a text field labelled ‘Email’. Type an email address into this field. Front end users will be able to click on this link to begin composing a message to this address.

Adding a map

This feature leverages the Google Maps API in order to add a map view to your Hijack. Search for an address in the field above the map (simply typing in a postcode normally does most of the work for you) and select from the dropdown in order to add a pin onto the map. Alternatively, you can click on the grey pin that appears on the far right side of the search field on hover in order to allow Google to pinpoint your current location.

Occasionally, the pin’s location isn’t 100% correct and it may need some manual tweaking. In these cases, use the zoom in/out tool as necessary and simply drag and drop the pin onto the correct location.

Adding a gallery

Navigate to the ‘Gallery’ tab in order to add a selection of images for inclusion in your Hijack. On first viewing, you will be faced with an empty field underneath the ‘Gallery’ heading, however you can begin to fill this space with images by clicking the blue ‘Add to gallery’ button underneath the field.

This will bring up the ‘Add Image to Gallery’ window. As with other sections, you have the option to select images already uploaded to the Media Library or, alternatively, you can upload new images from your local computer. Any images newly uploaded will be stored in the Media Library for future use by yourself or other Hijack Editors. Please ensure you give new images alt text – as the video above demonstrates – in order that they are compliant with Web Content Accessibility Guidelines.

Click as many images as you would like to add. You will see a blue tick in the upper righthand corner of the images that will be added to the gallery. Click this blue tick again in order to remove an image from your selection. When you are happy, click ‘Select’ to save the images to your gallery and return to the gallery configuration.

From here, you can re-order images by simply dragging and dropping them into position. You can also remove an unwanted image by hovering over it and clicking the ‘x’ in the upper righthand corner.

Custom Tabs

An advanced feature of Hijack is “Custom Tabs”. This allows you to embed content from external providers.

It can be added on a chapter-by-chapter basis, and you can add as many custom tabs as you would like.

In your chapter, you can add “Custom tabs” as a “Chapter option”.

Once added, you will see “Custom tabs” as an available section in the left hand menu. From there you can add a new tab. Each tab can then be configured using the fields provided. It’s not as easy as copy and paste, but this will give you absolute control to embed from almost anywhere.

• Tab title: This is the title that will appear in the menu of tabs in your Hijack.
• Associated Script URL: If your embed requires any javascript to function, you should paste the URL to this here.
• Element Text: If your embed requires specific text within a HTML tag, you can enter this here (most don’t though!)
• HTML Tag Type: You can choose from a selection of html tag types that should match the html tag used in your embed code.
• Iframe URL: If your embed is an iframe, you can paste the URL in here.
• Class List: If your embed requires a class to be used, you should add the class name(s) here. Multiple classes can be added with a space in between them.
• Element ID: If your embed requires an ID to be defined, you can add this here. Multiple IDs can be added with a space in between them.
• Remove Padding: This is pretty straightforward, but can have a transformative effect on your embed. It will remove the space around your embed. This means it will fill the entire space available.

Chapter Categories

When creating a Chapter, you can add it to a category. This can help with Hijacks where there are many chapters within your experience, because it will show a collapsible section hiding many chapters, rather than the standard list of Chapters, which could become unwieldy.

In the Chapter creation screen, look out for the “Chapter Category” field. This is a drop down, and will show any previously created Categories. If your desired Category does not exist, you can create a new one.

To create a new Category, simply hover over the dropdown and tap the “+” icon that appears at the top right of the dropdown. Provide a name for your Category and press “Add”.

If more than one chapter is assigned to the same Chapter Category, they will appear as in a collapsible button with the Chapter Category name as the label.

Adding a Live Stream

You can add a Facebook or Youtube live stream to your Hijack chapter in the ‘Video’ tab of the ‘Chapter Details’ panel.

Choose ‘Social Media’ as the type of video, and paste in the embed URL from your live stream platform.