Course Lesson Enhancements

The Course Lesson Enhancements feature uses Site Builder and custom pages to create and configure the Tour Guide functionality.

1. From your Admin Dashboard, select Channels
2. Select Website
3. Create a new custom page and give it a recognizable title (for example, Tour Guide Settings - All Courses)
4. Open the page you selected
5. Follow the instructions here and set the page visibility to Only me
6. Open the default Banner section
7. Click Delete section
8. Select +Add Section
9. Search for and select the Tour Guide section

Make sure to delete the default Banner section from the created custom page.

Now that you have added the required section, you can edit the popups that will display in the Course Player.

1. From your Admin Dashboard, select Channels
2. Select Website
3. Find the page you created in Step 1
4. Open the Tour Guide section you added in Step 1
5. Open each settings group to modify various popups. The page preview will explain where and how each popup appears
6. Click Save

If you are making updates to the existing Tour Guide, you must complete the Step 3 & 4 to ensure that the updates are applied.

Once you finish configuring the settings, you can generate the code. This code needs to be added to the SIte Footer Code section of your settings to display and work in Course Player.

1. From your Admin Dashboard, select Channels
2. Select Website
3. Find the page you created in Step 1
4. At the top right of the page preview, click Copy Code
5. In the popup, select Site Footer Code Settings so you can be transferred to the corresponding section
   1. Alternatively, from your Admin Dashboard, select Settings
   2. Select the Code & analytics tab
6. In the Site footer code section, paste the code you copied

If you are making updates to the existing Tour Guide, replace the Tour Guide code you created previously. This Tour Guide code that you need to replace will be located between the following code elements (the exact text might vary, but will mention Tour Guide): <!-- Tour Guide v1.0.XX - Start -->  and <!-- Tour Guide - End -->. Replace the whole line, including the mentioned code elements with the new code.

Now you have added the code, it is time to test the tour guide!

1. From your Admin Dashboard, select Products
2. Select Courses
3. Open any course
4. Select Preview
5. If this is your first time previewing, you will see a popup right away. If not, click Player Help in the top right

The Course Lesson Enhancements feature uses Site Builder and custom pages to create and configure the Style Editor functionality.

1. From your Admin Dashboard, select Channels
2. Select Website
3. Create a new custom page and give it a recognizable title (for example, Style Editor Settings)
4. Open the page you selected
5. Follow the instructions here and set the page visibility to Only me
6. Open the default Banner section
7. Click Delete section
8. Select +Add Section
9. Search for and select the Power Style Editor section

Make sure to delete the default Banner section from the created custom page.

Now that you have added the required section, you can edit the popups that will display in the Course Player.

1. From your Admin Dashboard, select Channels
2. Select Website
3. Find the page you created in Step 1
4. Open the Power Style Editor section you added in Step 1
5. Open each settings group to modify various aspects of the course player. The changes you make will be previewed in the simulated course player in the page preview section of the page. To see the full version of the course player, click on the Fullscreen button
6. See the instructions for common modifications below
7. Click Save

If you are making updates to the existing Style Guide, you must complete the Step 3 & 4 to ensure that the updates are applied.

Use Custom Fonts

1. With the page from Step 1 still open, in a new tab open Google Fonts
2. Find the font(s) you want to use
3. Click Get font
4. Repeat the steps for all other fonts you want to add
5. Once all fonts are added, click on the shopping bag icon on the top right
6. Click Get embed code
7. Under the <link> section of the Web tab, copy the <head> embed code - DO NOT CLOSE THIS WINDOW
   
8. In Site Builder, open the Power Style Editor section you added in Step 1
9. Select the Custom Fonts settings group
10. Add the code you copied here
11. Go back to the Google Fonts tab
12. Under the <link> section of the Web tab, copy the font-family line of code in the CSS section for the code you want to use
    
13. In Site Builder, open the Power Style Editor section you added in Step 1
14. Select the settings group you want to edit (e.g. Side Menu (Chapter & Lessons) or Content Text)
15. Find the style of text you want to change (e.g. Heading 1)
16. Change the style from Default to Custom Color or Font
17. In the Font Family, paste the snippet you copied in step 11
18. Click Save
    

To ensure that the correct fonts apply, the paragraph format of the text in course builder should match the one defined in the Style Guide. In the above example, a custom font will only apply to text that is marked as Heading 1 in your course builder text editor.

Hide the Lesson Type Names and Icons

1. In Site Builder, open the Power Style Editor section you added in Step 1
2. Select the Side Menu (Chapters & Lessons) settings group
3. Under the Lesson Type settings, select Hide
4. Click Save

Apply Style to Specific Courses Only

If you create a style guide for specific course(s) only, you will need to create a new custom page so it does not negatively interact with other settings.

1. Create a new custom page by following the instructions in Step 1 and ensure to give it a clear and descriptive name (e.g. Course Player Styles for Course A)
2. Configure the style as described above
3. Under the Style applies to setting group, select Specific Courses
4. Select + Add course targeting option at the bottom of the settings list
5. Search the course to apply the settings to
6. Repeat steps 4-5 for other courses
7. Click Save

Once you finish configuring the settings, you can generate the code. This code needs to be added to the SIte Footer Code section of your settings to display and work in Course Player.

1. From your Admin Dashboard, select Channels
2. Select Website
3. Find the page you created in Step 1
4. At the top right of the page preview, click Copy Code
5. In the popup, select Site Footer Code Settings so you can be transferred to the corresponding section
   1. Alternatively, from your Admin Dashboard, select Settings
   2. Select the Code & analytics tab
6. In the Site footer code section, paste the code you copied

If you are making updates to the existing Style Editor, replace the Style Editor code you created previously. This Style Editor code that you need to replace will be located between the following code elements (the exact text might vary, but will mention Tour Guide): <!-- PowerStyle v1.0.XX Style Default -->  and <!-- PowerStyle End -->. Replace the whole line, including the mentioned code elements with the new code.

If you are using a course-specific style together to the general course styling, add the code for a course-speicifc styling in addition to the general styling (do not replace general styling code). 

Now you have added the code, it is time to see how it looks like in the Course Player!

1. From your Admin Dashboard, select Products
2. Select Courses
3. Open any course
4. Select Preview

The Course Lesson Enhancements feature uses Site Builder and custom pages to create and configure the Powerpop functionality. You must add the Powerpop Editor section in order to start building your popups

1. From your Admin Dashboard, select Channels
2. Select Website
3. Create a new custom page and give it a recognizable title (for example, Powerpop Setup Page)
4. Open the page you selected
5. Follow the instructions here and set the page visibility to Only me
6. Open the default Banner section
7. Click Delete section
8. Select +Add Section
9. Search for and select the Power Pops Editor section

As you add your popups they will all appear in the preview section, where you can easily search, navigate, and click on them to see how they appear for students.

Make sure to delete the default Banner section from the created custom page and the Power Pops Editor section is at the very top of the page. 

Now that you have added the required section, you can eand and configure the popups that will display in the Course Player. Each popup will be its own separate section. The Course Lesson Enhancements feature comes with 17 prebuilt popups, which include:

• Announce - Event: can be used to announce important events
• Confetti: shoots confetti to celebrate milestones and achievements
• Encouragement - Canva: use animation from canva.com as an inspirational message
• Encouragement - lesson: callout a specific lesson that students should pay attention to
• Encouragement - progress: encourage students to complete their course when they are close to completing it (e.g. at 80%)
• Encouragement - quote: encourage students using an inspirational quote
• Encouragement - started: encourage students to continue their course, as they get past the first part of the content (e.g. the first 10%)
• Gameify - Gift: rewards students for making progress to a certain milestone (e.g. 80%)
• Gameify - No Zombies: reinvigorate your students by adding this fun animation when they reach the middle of the course (a.g. 50%)
• Gameify - Tease: encourage students to complete a chapter by teasing an upcoming prize (works great with the Gameify - gift section)
• Remind - Hold Up: remind students about a lesson or a task that they should have completed in a previous lesson
• Remind - branch: encourage students to choose their next chapter (works great if your content is non-linear and students can bounce between different chapters)
• Remind - break: encourage students to take a break to prevent burnout and fatigue
• Remind - support: encourage students to reach out to you and your community for support, if they feel stuck
• Sell - Coaching: upsell coaching services rigth in the Course Player
• Sell - Coupon: offer coupons to encourage students to purchase another products
• Sell - Pre-Order: promote products that are still in pre-order

Finally, you can build your own popup using Buid your own section. All popups and sections have the same settings, so you can modify them as needed:

1. From your Admin Dashboard, select Channels
2. Select Website
3. Find the page you created in Step 1
4. Click + Add section
5. Search for a prebuilt popup from the list above or chose Build your own section to create a popup from scratch
6. Open the popup and modify its settings:
   1. Select whether the popup is Active
   2. Select the Type of a popup
   3. Select the Display Rules: at what point should a popup appear. You can chose to trigger popup at lessoon start, lesson completion, or when a specific progress is reached. See the instructions below on how to specify the target lesson.
   4. Modify Text of the popup
   5. Modify Media included in the popup: use your own gif or media or add a file URL from Lottie Files
   6. Select a Call to Action, if needed: where a button should lead
   7. Modify the popup Design
7. Click Save
8. Repeat steps 4-7 for any other popups you want to add

Target a Specific Lesson or a Course

Quiz, Assignment, and Brillium Exam lessons do not trigger the Lesson Complete event, so use a Progress trigger instead.

When setting up display rules, you might choose to target a specific lesson. For example, you might want to show an encouregament popup after a particularly hard lesson. To ensure that a popup is triggered after a right lesson, you will need to:

1. In the Display rules section of a popup, select Courses/Lessons
2. Select the display trigger (e.g. Lesson Completed)
3. At the bottom of the settings list, swelect + Add courser targeting
4. Choose a course where the lesson you are targeting is
5. Without closing the Site Builder, open your Thinkific account in a new tab
6. Select Products
7. Select Courses
8. Find the corse where the lesson you are targeting is
9. Find the lesson you are targeting
10. In the URL, find the Lesson ID: it is the last group of digits after /contents/. For example, if your URL is: https://example.thinkific.com/manage/courses/0000000/contents/1234567, your lesson ID is 1234567
11. Back in the Site Builder, add the lesson ID you just found to the Lesson IDs field
12. If you want to target multiple lessons within the same course, separate multiple lesson IDs by a comma
13. If you want to target lessons in other courses, repeat steps 3-11

Once you finish configuring the settings, you can generate the code. This code needs to be added to the SIte Footer Code section of your settings to display and work in Course Player.

1. From your Admin Dashboard, select Channels
2. Select Website
3. Find the page you created in Step 1

4. At the top right of the page preview, click Copy Code

   Note that code won't generate if some of your popups are missing key information. The popups with missing information will display a warning. See the troublshooting section below.

5. In the popup, select Site Footer Code Settings so you can be transferred to the corresponding section
   1. Alternatively, from your Admin Dashboard, select Settings
   2. Select the Code & analytics tab
6. In the Site footer code section, paste the code you copied

If you are making updates to the existing Tour Guide, replace the Tour Guide code you created previously. This Tour Guide code that you need to replace will be located between the following code elements (the exact text might vary, but will mention Tour Guide): <!-- PowerUpPops  v1.0.XX - Start -->  and <!-- PowerUpPops  - End -->. Replace the whole line, including the mentioned code elements with the new code.

Now you have added the code, it is time to test the tour guide!

1. From your Admin Dashboard, select Products
2. Select Courses
3. Open any course
4. Select Preview
5. Complete the action that triggers the popup you setup (e.g. complete specific lesson)

The code won't generate if some of your popups are missing key information. The popups with missing information will display a warning. Here are the most common reasons for the warning:

• You specified Course targeting and did not add a Course Targeting block. 
  Fix: Add a course targeting block.
• You specified Lesson Start or Lesson Complete Trigger and did not specify a lesson.
  Fix: Add a course targeting block and specify Lesson ID (see the Step 2 above).
• You are using a Pop Up Pop type but are missing a heading. 
  Fix: add a heading in the Text setting group (see the Step 2 above).
• You are using an Image/Gif for the media type, but did not specify an image.
  Fix: add an image in the Media settings (see the Step 2 above).
• You are using an animation in the Media section, but did not specify a Lottie animation URL. 
  Fix: add a Lottie animation URL in the settings (see the Step 2 above).

No, the Course Player Enhancements are not supported in the Thinkific or a Branded mobile app.

Yes, you can. After you make updates in Site Builder, you will need to regenerate the code and replace the old code with the new one in the Site Footer Code section.