# Getting Started With Player Snips {% hint style="warning" %} You will not see how the player looks from the curriculum preview page. You must view the snippet from the course player. If you are adding or changing existing lessons on a live course, you may want to keep the lesson in draft mode until you are happy with all of your changes and then turn off draft mode to make the lesson available to your students {% endhint %} {% embed url="" %} ### How to Use Player Snips * [ ] Make sure you have **Player Snips** and **Player Snips Premium** apps installed by checking your Apps page on your Thinkific site. If you only have the Free collection, then you will only see "Player Snips" app listed * [ ] **Create a custom page** inside your site that will be used as your own personal library of Player Snips * [ ] Go to `Design your Site / Site Pages`: *yoursite.thinkific.com/manage/site\_pages* * [ ] Click `"New Custom Page"` * [ ] Enter a name for the page that you will remember. For example: *My Player Snips* * [ ] **Remove the default Banner section** on the page * [ ] **Change the page permissions** so that only you can view the page * [ ] Click on the `gear icon` * [ ] Change the `Who can see this page?` setting to "*Only Me*" * [ ] Add a section and search for **Player Snips Builder**
* [ ] **Add a Player Snip section** to the page by searching for `Player Snips`. To quickly filter the list for certain types of Player Snips, search for the following * [ ] [Layout Snips](/the-snips/layout-snips): **`CL-`** * [ ] [Effects Snips](/the-snips/effects-snips): **`ES-`** * [ ] [Popup Snips](/the-snips/popup-snips): **`PU-`** * [ ] [Content Snips](/the-snips/content-snips): **`PS-`**
* [ ] Go into the individual **Player Snip section settings** and change the options based on your preferences. Each Player Snip will come with a different set of configuration options. * [ ] **Hover over the Player Snip to access the actions available** for that snip. For snips that are not visible (like popups or effects), you will be able to trigger the snip using the action buttons so you can preview how it will look. There is also an action button that will take you to the snip's user guide. * [ ] When you are satisfied with how your Player Snip looks or behaves, then **hover over the Player Snip and click on the `Copy Player Snip` button**
* [ ] **Go into a text setting inside your course curriculum** (Text Lessons, Text Under Video, etc) * [ ] Put your cursor in the position that you wish to place the Player Snip and then **go into the code view** mode by clicking on the `< >` button * [ ] **Get out of code view** and save the lesson * [ ] **Preview the current lesson** inside the course player # Installing Player Snips ### Before Installation: Create an account and purchase Player Snips (it is included for free with a PowerUp Pass) PowerUps **do not require a monthly subscription.** We do however require you to create an account on [SuperPowerUps.com ](https://www.superpowerups.com/)and purchase a PowerUp before you can install it into any site. If you are a [PowerUp Pass member](https://www.superpowerups.com/cart/add_product/1596829?price_id=2254107), then you will have instant access to any PowerUp without having to purchase it. {% hint style="warning" %} After your purchase you will be able to install the PowerUp app from the [member portal](https://powerups.thinkific.com/pages/playeah-activation). Depending on the license that was purchased, you may be able to install this app on many Thinkific sites or just one site. {% endhint %} {% hint style="info" %} Be sure to have your Thinkific Site Admin login details handy in order to install a Snap PowerUp into your site. {% endhint %} ### STEP 1: Login as a Site Admin & Locate your Thinkific Subdomain ![](https://2707341247-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0a4fOaDyLl7Kt3XPr3Dc%2Fuploads%2FQ6bYrHA8345df5IMlFes%2FSettings-PowerUps-for-Thinkific-Sites-by-Rob-Galvin%20\(1\)%20\(1\)%20\(1\).png?alt=media\&token=e9f1c43c-61b5-460f-8f12-687cd7d16ca1) ### STEP 2: Enter your Subdomain on the Activation Page Once you have your subdomain for the Thinkific site you wish to install a PowerUp just enter it into the input field {% hint style="info" %} During the **purchase process you may already be directed to this page automatically after purchase**. You should also be already logged in to the member portal at this time, but in case you need to revisit the page, or if you were rudely interrupted :triumph: during the process, you can restart the process by just logging back into the [member portal](https://powerups.thinkific.com/enrollments). {% endhint %} ### STEP 3: Accept the App Installation After entering your subdomain, you will see a screen that looks like below. Be sure to click on the **ACCEPT & INSTALL** button. :point\_down: It's that big dark blue-ish / purple-ish button at the bottom of the page
{% hint style="warning" %} This PowerUp does not actually use any API's or access any of your Thinkific site data. Currently Thinkific's app screen that you see above is the same for all applications. The clause noted "Access and modify your Thinkific data" is applied to all Apps by Thinkific, however Snap PowerUp does not use any such requests. {% endhint %} ### STEP 4: Watch the Getting Started Videos After you install this PowerUp, nothing will happen to your site until you decide to add it to your site pages. Head over to the [Getting Started training ](/)to begin using your new superpower. # "How To" Guides {% hint style="warning" %} You will not see how the player looks from the curriculum preview page. You must view the snippet from the course player. If you are adding or changing existing lessons on a live course, you may want to keep the lesson in draft mode until you are happy with all of your changes and then turn off draft mode to make the lesson available to your students {% endhint %} ## How to Create a My Snips Page We will use Thinkific's Site Builder to create a custom page that will store all of our Player Snips that we will want to use for our courses. You will then be able to copy and paste these Player Snips into the course lessons without having to edit and code. * [ ] **Create a custom page** inside your site that will be used as your own personal library of Player Snips * [ ] Go to `Design your Site / Site Pages`: *yoursite.thinkific.com/manage/site\_pages* * [ ] Click `"New Custom Page"` * [ ] Enter a name for the page that you will remember. For example: *My Player Snips* * [ ] **Remove the default Banner section** on the page * [ ] **Change the page permissions** so that only you can view the page * [ ] Click on the `gear icon` * [ ] Change the `Who can see this page?` setting to "*Only Me*" * [ ] Add a section and search for **Player Snips Builder**
* [ ] **Add a Player Snip section** to the page by searching for `Player Snips`. To quickly filter the list for certain types of Player Snips, search for the following * [ ] [Layout Snips](/the-snips/layout-snips): **`CL-`** * [ ] [Effects Snips](/the-snips/effects-snips): **`ES-`** * [ ] [Popup Snips](/the-snips/popup-snips): **`PU-`** * [ ] [Content Snips](/the-snips/content-snips): **`PS-`**
* [ ] Go into the individual **Player Snip section settings** and change the options based on your preferences. Each Player Snip will come with a different set of configuration options. * [ ] **Hover over the Player Snip to access the actions available** for that snip. For snips that are not visible (like popups or effects), you will be able to trigger the snip using the action buttons so you can preview how it will look. There is also an action button that will take you to the snip's user guide. * [ ] When you are satisfied with how your Player Snip looks or behaves, then **hover over the Player Snip and click on the `Copy Player Snip` button**
* [ ] **Go into a text setting inside your course curriculum** (Text Lessons, Text Under Video, etc) * [ ] Put your cursor in the position that you wish to place the Player Snip and then **go into the code view** mode by clicking on the `< >` button * [ ] **Get out of code view** and save the lesson * [ ] **Preview the current lesson** inside the course player {% hint style="info" %} If you are other content around the Player Snippet, it is sometimes helpful to temporarily "mark" the areas around the player snippet, so when you return to the normal preview view, you will know where the Player Snip is located in the full area. {% endhint %} ## How to generate links for downloads, mp3's, etc In some cases you may want to use the Player Snips to link to some sort of download. When you are using the Player Snips builder in the "My Snips" page, the section settings will give you a way to provide a link, but it does not provide a way to upload a new file. In order to use it this way we recommend that you create a draft lesson in a course and then copy and paste the link into the My Snips section settings: * [ ] Create a dummy lesson that is a Download lesson type * [ ] Keep it draft and it can also be in any course * [ ] Upload your files to the Download lesson * [ ] Then preview the lesson in the course player * [ ] Locate your file in the list of downloads and then right click to copy the link * [ ] Then use this link in the Player Snip as a "Custom Url" ## How to use Animations within Player Snips Our Player Snips that have animations like the Popup Animation Bar require a url to a JSON animation. You can Google where to get these, but we love [LottieFiles](https://lottiefiles.com/) #### How to get a Lottie animation url * [ ] Create a free account over at * [ ] Search for a free Lottie animation * [ ] Select a Lottie and then copy the Lottie Animation Url to your clipboard * [ ] Paste in the Lottie Animation Url into the Player Snip settings
# Latest Updates ## Dec 18: New Flip Cards We just added four new Player Snips to give you a way to put some interaction into your lessons {% content-ref url="/pages/QCtZOWn4iaTk1R3DshyM" %} [PS-036 Flip Cards (text)](/the-snips/content-snips/ps-036-flip-cards-text) {% endcontent-ref %} {% content-ref url="/pages/aeiWgXykQ0bMuacbHas0" %} [PS-037 Flip Cards (Image)](/the-snips/content-snips/ps-037-flip-cards-image) {% endcontent-ref %} {% content-ref url="/pages/f1HY5tWJcLLVqoFlQTRa" %} [PS-038 Flip Hover Cards (CTA)](/the-snips/content-snips/ps-038-flip-hover-cards-cta) {% endcontent-ref %} {% content-ref url="/pages/SuGfgDQ4LU6BGTa2aLQN" %} [PS-039 Timeline Cards](/the-snips/content-snips/ps-039-timeline-cards) {% endcontent-ref %} ## Dec 16: New Numbered List options {% embed url="" %} We just added six new Player Snips that will transform your boring numbered lists into somethint a lot more appealing and noticeable.\ \ Look for [*PS-030*](/the-snips/content-snips/ps-030-colored-numbered-style-1)*,* [*PS-031*](/the-snips/content-snips/ps-031-colored-numbered-style-2)*,* [*PS-032*](/the-snips/content-snips/ps-032-colored-numbered-style-3)*,* [*PS-033*](/the-snips/content-snips/ps-033-emoji-bullet-list)*,*[ *PS-034*](/the-snips/content-snips/ps-034-animated-numbered-list)*,* [*PS-035*](/the-snips/content-snips/ps-035-snake-numbered-list) added to PlayerSnips Premium.\ \ All of them are fully customizable and very easy to quickly build an appealing list where you want to make sure your students realize there are "numbers/steps" to follow. ## Nov 20: Introduced Codeless editing * We reworked how Player Snips is used entirely so that you do not have to edit any code. Player Snips will now be created from within Site Builder on a custom page that can be used to store your own private collection of reusable Player Snips. Editing the content and controlling the options of the Player Snip will now be performed without touching a line of code. You will then copy the code snippet from the custom page to the course lesson editor * Player Snips are now listed as two separate "apps" - `Player Snips` is the Free Edition and `Player Snips Premium` is the full collection ## Oct 31: Available to PowerUp Pass members * PowerUp Pass members will have early access to PlayerSnips. The initial release will contain over 25 PlayerSnips to choose from * Typically one month later there will be a public release making this PowerUp available for individual purchase # FAQ's ## My Snips do not look the same in the course as they do in the page builder? This is usually caused by the Player Snips Script not fully being installed. You can try [**reinstalling Player Snips Premium from the main site**](https://www.superpowerups.com/pages/player-snips) or also you can try adding this code to your Site Footer Code settings page.
``` ```
## How do I use Player Snips on a Site Page? {% embed url="" %} Player Snips by default is intended to help you enhance the "course player" experience. This is what your student sees when they are watching your course. If you want to display Player Snips on a Site Page (ex: home page, a course page, etc), then you need to use this with Site Page Templates and follow these directions: 1. Install [Site Page Templates](https://www.superpowerups.com/pages/site-page-templates) to your site 2. In one tab of your browser open your "PlayerSnips" library page - this is the page that you have [Player Snips Builder](/#how-to-use-player-snips) added 3. In another browser, open the Site Page you wish to add the Player Snip to. This could be a course page, home page, or any page you want (not the course lesson page) * [ ] Add Site Page Templates core section to the this page * [ ] Add Player Snips Page Snip section to the page * [ ] From your first tab, click the copy snip button (like you would normally) * [ ] In the second tab, open the Player Snip settings group and paste the code * [ ] You can then use the common Site Page Template settings to control the section background, padding, etc ## Why would I want to use Player Snips? When you are using any text options inside your course curriculum and you want an easier way to make it look better. We have created a library of copy and paste fill-in-the-blank design snippets for you to use. You can also add some fun effects like confetti, emojis or even sound effects when lessons are started or completed Personalized Popups can be configured to automatically show when specific lessons are started or completed. They can play a sound on entry and also auto close after a confugured amount of time. Popups can also be clickable to an external page when a call to action is required. ## What are some use case examples? * Callouts to bring attention to important things like "what you will learn in this lesson" * Banners and calls to action that can be used for various reasons * Richer formatting of lists of downloads or resources * Image galleries * Complete text lessons with richly designed layouts * Quick responsive layout options * Change the lessons formatting quickly ex: expanding the default width of the content area ## Do I need to be technical to use this? No, although your eyes will see "code", you do not have to be technical to use this. You will be using the built in Site Builder to create your player snips without having to modify any code. Then you will simply copy and paste the Player Snip into your course lessons. Each PlayerSnip comes with step by step instructions for the specific details that may be associated with the Player Snip. We also feel that this process is waaaaay less frustrating than using the standard editor that you have been using. ## Where can the Player Snips be placed? All Player Snips are meant to be placed inside of your course curriculum. They are not meant to be used on your Site Pages. Here are some usage notes for each lesson type * **Video Lessons** - All Player Snip types are fully supported for video lessons and are to be placed inside the code view of the Text settings of the video lesson. * **Text Lessons** - All Player Snip types are fully supported for Text lessons and are to be placed inside the code view of the Text setting. * **Audio Lessons** - All Player Snip types are fully supported for audio lessons and are to be placed inside the code view of the Text settings of the audio lesson. * **Download Lessons** - All Player Snip types are fully supported for download lessons and are to be placed inside the code view of the Text settings of the download lesson. * **Quiz & Survey Lessons:** * Content snips are fully supported and are to be placed inside the code view of the text area of the Question and Answer settings. * Effects and Popups snips with a lesson complete trigger are also supported. * Effects and Popups for lesson start triggers are supported for the first question only. * Layout Player Snips are not fully supported * **Assignment Lessons** - * Content snips are fully supported and are to be placed inside the code view of the text area of assignment instructions. * Effects and Popups for lesson start triggers are supported when placed inside the code view of the text area of assignment instructions. * Effects and Popups snips with a lesson complete trigger are not supported. * Layout Player Snips are not fully supported * **PDF, Presentation, Multimedia, Live and Exam lessons** are not supported with Player Snips ## Can the Player Snips be combined? Yes, you can stack any combination of Player Snips to create the perfect design you are looking to achieve. We really love stacking content snips with effects and popups. ## How many Player Snips are available to use? The library of Player Snips initially became available with over 30 Player Snips. We will regularly being adding new Player Snips and capabilities. As long you have access to Player Snips, you will have access to any Player Snip we release. ## How easy is it to change the placeholder info? The placeholders are easy to replace. All editing is done inside of Site Builder just like how you would edit a page. You will not have to touch any code. All code that is used inside the course lesson is automatically generated for you. After using Site Builder, you will then simply copy and paste into your course lesson. ## What if I want to change a lesson that is "live" to students? What we recommend is that you create a new lesson in "draft" mode until you have it completed. Then you can switch the new lesson to live mode and either the delete the older version of the lesson or put that one in draft mode ## Are the Player Snips "responsive"? Do they look good on mobile? Yes, all of the Player Snips are automatically mobile friendly and will adapt to various display sizes. There is nothing for you to do here. ## What colors are used? In Player Snips that have buttons, checklists, icons and accent colors, we automatically use the "brand" color that you have set for the course. It will be the same coloring that is used for the Complete and Continue button. In some cases we use multiple accent colors and the secondary accent colors use an opacity level or your main color (which lightens your colors on a white background and darkens your color on a dark mode player). If you would like to change the color scheme used, you can change the color mode for that Player Snip and fully customize the perfect color combination. ## Does this work with both Light and Dark Course player themes? Yes, Player Snips works with both Light and Dark mode course player themes # Layout Snips These Player Snips are for all of your Layout needs # CL-001 100% Content Width CL-001 - This Player Snip will increase the content area to use 100% of the available space.
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the CL-001 section to your page * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab open your course curriculum and find the lesson you wish to place this Player Snip into * [ ] Open up the < > code viewer * [ ] Paste the snip at the top of the code * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player # CL-002 80% Content Width CL-002 - This Player Snip will increase the content area to use 80% of the available space.
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the CL-002 section to your page * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab open your course curriculum and find the lesson you wish to place this Player Snip into * [ ] Open up the < > code viewer * [ ] Paste the snip at the top of the code * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player # CL-003 2 Columns (Responsive) CL-003 - Give you two responsive columns to work with.
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the CL-003 section to your page * [ ] Open up the section settings and modify the text settings using the editor. * [ ] Hover over the section and click the **`Copy Player Sni`**`p` button * [ ] In another tab open your course curriculum and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player # CL-004 3 Columns (Responsive) CL-004 - Give you three responsive columns to work wi.
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the CL-004 section to your page * [ ] Open up the section settings and modify the text settings using the editor. * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab open your course curriculum and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player # Content Snips These Player Snips are used for all of your content needs # PS-001 Callout With No Button PS-001 - This Player Snip has a colored background with a heading and summary.
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-001`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player # PS-002 Callout With Heading on Top PS-002 - This Player Snip has a colored background with a heading and summary and call to action (placed underneath the text)
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-002`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Open the section's **`Call To Action` settings group** and modify the options. If you do not want to use a button, then remove the button text * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click the link to access the link options for [replacing the link text ](/how-to-guides#how-to-replace-links)and link url * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} The button color is automatically using the same "brand color" you have set for this course. It will be the same color you see for the complete and continue button. {% endhint %} ## # PS-003 Callout With Button on Side PS-003 - This Player Snip has a colored background with a heading and summary and call to action (placed on the side)
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-003`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Open the section's **`Call To Action` settings group** and modify the options. If you do not want to use a button, then remove the button text * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} The button color is automatically using the same "brand color" you have set for this course. It will be the same color you see for the complete and continue button. {% endhint %} ## # PS-004 Jumbo Heading PS-004 - This Player Snip has an extra large heading making it a great banner to start a text lesson
{% hint style="warning" %} We recommend you stack your Player Snips for this one and add the extended with options either the [100% width](/the-snips/layout-snips/cl-001-100-content-width) or [80% width](/the-snips/layout-snips/cl-002-80-content-width) {% endhint %} **Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-004`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Open the section's **`Call To Action` settings group** and modify the options. If you do not want to use a button, then remove the button text * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Sni`**`p` button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} The button color is automatically using the same "brand color" you have set for this course. It will be the same color you see for the complete and continue button. {% endhint %} # PS-005 Two Buttons & Highlighted Text PS-005 - This Player Snip has an extra large heading that has highlighted text and also two call to action buttons
{% hint style="warning" %} We recommend you stack your Player Snips for this one and add the extended with options either the [100% width](/the-snips/layout-snips/cl-001-100-content-width) or [80% width](/the-snips/layout-snips/cl-002-80-content-width) {% endhint %} **Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-005`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Open the section's **`Call To Action` settings group** and modify the options. If you do not want to use a button, then remove the button text * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} The button and highligh text color is automatically using the same "brand color" you have set for this course. It will be the same color you see for the complete and continue button. {% endhint %} ## # PS-006 Image on Left PS-006 - This Player Snip has an image on the left of a heading, text and CTA section. Their are two CTA available
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-006`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Open the section's **`Call To Action` settings group** and modify the options. If you do not want to use a button, then remove the button text * [ ] Open the section's **`Image` settings group** and replace the placeholder image. The recommended image dimensions are shown in the image * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} The button color is automatically using the same "brand color" you have set for this course. It will be the same color you see for the complete and continue button. {% endhint %} ## # PS-007 Image on Right PS-007 - This Player Snip has an image on the right of a heading, text and CTA section. Their are two CTA available
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-007`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Open the section's **`Image` settings group** and replace the placeholder image. The recommended image dimensions are shown in the image * [ ] Open the section's **`Call To Action` settings group** and modify the options. If you do not want to use a button, then remove the button text * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} The button color is automatically using the same "brand color" you have set for this course. It will be the same color you see for the complete and continue button. {% endhint %} ## Video Walkthrough {% embed url="" %} # PS-008 Image (Left) & Checklist PS-008 - This Player Snip has an image on the left of a heading, text and checklist
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-008`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Open the section's **`Image` settings group** and replace the placeholder image. The recommended image dimensions are shown in the image * [ ] Modify the list by updating the **`Block Item settings`**. Add, update, delete or re-order items in the list by using the Block settings. * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} The color of the list icon and background behind the image is automatically using the same "brand color" you have set for this course. It will be the same color you see for the complete and continue button. {% endhint %} ## # PS-009 Image (Right) & Checklist PS-009 - This Player Snip has an image on the right of a heading, text and checklist
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-009`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Open the section's **`Image` settings group** and replace the placeholder image. The recommended image dimensions are shown in the image * [ ] Modify the list by updating the **`Block Item settings`**. Add, update, delete or re-order items in the list by using the Block settings. * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} The color of the list icon and background behind the image is automatically using the same "brand color" you have set for this course. It will be the same color you see for the complete and continue button. {% endhint %} ## # PS-010 Multiple Images & Checklist PS-010 - This Player Snip has a multiple images on the left of a heading, text and checklist section. The images are surrounded by accent colors that automatically use your brand color
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-010`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Open the section's **`Image` settings group** and replace the placeholder images. The recommended image dimensions are shown in the image * [ ] Modify the list by updating the **`Block Item settings`**. Add, update, delete or re-order items in the list by using the Block settings. * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} The color of the list icon and accent colors around the images are automatically using the same "brand color" you have set for this course. It will be the same color you see for the complete and continue button. {% endhint %} ## # PS-011 Multi Image Centered PS-011 - This Player Snip has a multiple images surrounded by accent color. The heading and text are centered below the main image, making it a great option for the banner of a lesson
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-011`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Open the section's **`Image` settings group** and replace the placeholder images. The recommended image dimensions are shown in the image * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} The color of the list icon and accent colors around the images are automatically using the same "brand color" you have set for this course. It will be the same color you see for the complete and continue button. {% endhint %} ## # PS-012 Quote Image Right PS-012 - This Player Snip is great to send your student some words of encouragement from you!
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-012`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Open the section's **`Image` settings group** and replace the placeholder image. The recommended image dimensions are shown in the image * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} The color of the list icon and background behind the image is automatically using the same "brand color" you have set for this course. It will be the same color you see for the complete and continue button. {% endhint %} ## # PS-013 Quote Circle Image Underneath PS-013 - This Player Snip is great to send your student some words of encouragement from you!
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-013`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Open the section's **`Image` settings group** and replace the placeholder image. The recommended image dimensions are shown in the image * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} The color of the list icon and background behind the image is automatically using the same "brand color" you have set for this course. It will be the same color you see for the complete and continue button. {% endhint %} # PS-014 Cards (3 Columns) PS-014 - This Player Snip is great for having a list of clickable resources
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-014`** section to your page * [ ] Modify the list by updating the **`Block Item settings`**. Add, update, delete or re-order items in the list by using the Block settings. * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} The color of the list icon and background behind the image is automatically using the same "brand color" you have set for this course. It will be the same color you see for the complete and continue button. {% endhint %} # PS-015 Bordered Checklist PS-015 - This Player Snip has a bordered call out with heading, text and checklist
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-015`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Modify the list by updating the **`Block Item settings`**. Add, update, delete or re-order items in the list by using the Block settings. * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} The color of the list icon and background behind the image is automatically using the same "brand color" you have set for this course. It will be the same color you see for the complete and continue button. {% endhint %} ## # PS-016 Hero 2 CTA's and shadows PS-016 - This Player Snip has an extra large heading and also two call to action buttons
{% hint style="warning" %} We recommend you stack your Player Snips for this one and add the extended with options either the [100% width](/the-snips/layout-snips/cl-001-100-content-width) or [80% width](/the-snips/layout-snips/cl-002-80-content-width) {% endhint %} **Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-016`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Open the section's **`Call To Action` settings group** and modify the options. If you do not want to use a button, then remove the button text * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} The button and highligh text color is automatically using the same "brand color" you have set for this course. It will be the same color you see for the complete and continue button. {% endhint %} # PS-017 Alert - Success PS-017 - This Player Snip has a colored background with a heading and summary. Perfect for congratulating your student on an accomplishment.
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-017`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player # PS-018 Alert - Warning PS-018 - This Player Snip has a colored background with a heading and summary. Perfect for reminding your student about something before proceeding
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-018`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player ## # PS-019 Gallery 6 Images PS-019 - This Player Snip has a gallery of 6 images
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-019`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Modify the list by updating the **`Block Item settings`**. Add, update, delete or re-order items in the list by using the Block settings. * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} The color of the list icon and background behind the image is automatically using the same "brand color" you have set for this course. It will be the same color you see for the complete and continue button. {% endhint %} ## ## # PS-020 Gallery 4 Images PS-020 - This Player Snip has a gallery of 4 images
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-020`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Modify the list by updating the **`Block Item settings`**. Add, update, delete or re-order items in the list by using the Block settings. * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} The color of the list icon and background behind the image is automatically using the same "brand color" you have set for this course. It will be the same color you see for the complete and continue button. {% endhint %} ## # PS-021 CTA Cards Side by Side PS-021 - With this Player Snip, you can create a list of resource cards with images and a call to action
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-021`** section to your page * [ ] Modify the list by updating the **`Block Item settings`**. Add, update, delete or re-order items in the list by using the Block settings. * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} The button color is automatically using the same "brand color" you have set for this course. It will be the same color you see for the complete and continue button. {% endhint %} ## # PS-022 Simple CTA PS-022 - This Player Snip is a simple call to action that blends in with the rest of your content
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-022`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Open the section's **`Call To Action` settings group** and modify the options. If you do not want to use a button, then remove the button text * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} The button color is automatically using the same "brand color" you have set for this course. It will be the same color you see for the complete and continue button. {% endhint %} ## # PS-023 Banner With Background Image PS-023 - This Player Snip is a great way to start a lesson or use for content separation.
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-023`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Open the section's **`Image` settings group** and replace the placeholder image. The recommended image dimensions are shown in the image * [ ] Open the section's **`Call To Action` settings group** and modify the options. If you do not want to use a button, then remove the button text * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} The button color is automatically using the same "brand color" you have set for this course. It will be the same color you see for the complete and continue button. {% endhint %} ## # PS-024 Banner Fixed Image PS-024 - This Player Snip is a great way to start a lesson or use to separate content. The background image is fixed (aka "Parallax") and has a nice movement while scrolling
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-024`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Open the section's **`Image` settings group** and replace the placeholder image. The recommended image dimensions are shown in the image {% hint style="warning" %} The image here is used for an "interesting transition" to the next section of the lesson=. It will be cropped in various sizes based on the size of the browser and if the course player is in full screen mode or in standard mode. You should select an image that does not have any words and don't care where it gets cropped. {% endhint %} * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} The button color is automatically using the same "brand color" you have set for this course. It will be the same color you see for the complete and continue button. {% endhint %} ## # PS-025 Sidebar List PS-025 - This Player Snip has a checklist on the side of text
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-025`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Modify the list by updating the **`Block Item settings`**. Add, update, delete or re-order items in the list by using the Block settings. * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} The color of the list icon and background behind the image is automatically using the same "brand color" you have set for this course. It will be the same color you see for the complete and continue button. {% endhint %} ## # PS-026 Dismissible Alert PS-026 - This Player Snip can have a variety of background colors and can be hidden by the student
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-026`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player ## # PS-027 Group of Links PS-027 - This Player Snip creates a list of links with a subtle hover effect
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-027`** section to your page * [ ] Modify the list by updating the **`Block Item settings`**. Add, update, delete or re-order items in the list by using the Block settings. * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player ## # PS-028 Group of Links (Enhanced) PS-028 - This Player Snip creates a list of links with a subtle hover effect. Each item has a heading and subtext to describe the item along with an icon
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-028`** section to your page * [ ] Modify the list by updating the **`Block Item settings`**. Add, update, delete or re-order items in the list by using the Block settings. * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player ## Video Walkthrough {% embed url="" %} # PS-029 Dropdown List of Links PS-029 - This Player Snip creates a list of links that gets shown when the student clicks on a button
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-029`** section to your page * [ ] **Open up the section's `Button` settings group** and modify the text settings * [ ] Modify the list by updating the **`Block Item settings`**. Add, update, delete or re-order items in the list by using the Block settings. * [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player ## # PS-030 Colored Numbered Style 1 PS-030 - This Player Snip is great for a nice looking list of numbers
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-030`** section to your page * [ ] Modify the list by updating the **`Block Item settings`**. Add, update, delete or re-order items in the list by using the Block settings. * [ ] Optionally open the section's **`Color`** settings group and change the *color settings* * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player ## # PS-031 Colored Numbered Style 2 PS-031 - This Player Snip is great for a nice looking list of numbers
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-031`** section to your page * [ ] Modify the list by updating the **`Block Item settings`**. Add, update, delete or re-order items in the list by using the Block settings. * [ ] Optionally open the section's **`Color`** settings group and change the *color settings* * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player ## # PS-032 Colored Numbered Style 3 PS-032 - This Player Snip is great for a nice looking list of numbers
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-032`** section to your page * [ ] Modify the list by updating the **`Block Item settings`**. Add, update, delete or re-order items in the list by using the Block settings. * [ ] Optionally open the section's **`Color`** settings group and change the *color settings* * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player ## # PS-033 Emoji Bullet List PS-033 This Player Snip looks like a sheet of paper with an emoji bullet list
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-033`** section to your page * [ ] Change the emoji used for the bullet list in the **Color & Style** settings * [ ] Modify the list by updating the **`Block Item settings`**. Add, update, delete or re-order items in the list by using the Block settings. * [ ] Optionally open the section's **`Color`** settings group and change the *color settings* * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player ## # PS-034 Animated Numbered List
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-034`** section to your page * [ ] Modify the list by updating the **`Block Item settings`**. Add, update, delete or re-order items in the list by using the Block settings. * [ ] Optionally open the section's **`Color`** settings group and change the *color settings* * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player ## # PS-035 Snake Numbered List This Player Snip wraps the numbers around the content like a snake
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-035`** section to your page * [ ] Modify the list by updating the **`Block Item settings`**. Add, update, delete or re-order items in the list by using the Block settings. * [ ] Optionally open the section's **`Color`** settings group and change the *color settings* * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player ## # PS-036 Flip Cards (text) This Player Snip has some interactivity, click on the card to flip it over for more information
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-036`** section to your page * [ ] Modify the list by updating the **`Block Item settings`**. Add, update, delete or re-order items in the list by using the Block settings. * [ ] Optionally open the section's **`Color & Style`** settings group and change the *color settings* * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player ## # PS-037 Flip Cards (Image) This Player Snip has some interactivity, click on the card to flip it over for more information
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-037`** section to your page * [ ] Modify the list by updating the **`Block Item settings`**. Add, update, delete or re-order items in the list by using the Block settings. * [ ] Optionally open the section's **`Color & Style`** settings group and change the *color settings* * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player ## # PS-038 Flip Hover Cards (CTA) You will flip over this Player Snip. Hover over the card to reveal more information and an optional call to action
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-038`** section to your page * [ ] Modify the list by updating the **`Block Item settings`**. Add, update, delete or re-order items in the list by using the Block settings. * [ ] Optionally open the section's **`Color & Style`** settings group and change the *color settings* * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player ## # PS-039 Timeline Cards This Player Snip shows cards stacked up with a thin line connecting them
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-039`** section to your page * [ ] Modify the list by updating the **`Block Item settings`**. Add, update, delete or re-order items in the list by using the Block settings. * [ ] Optionally open the section's **`Color & Style`** settings group and change the *color settings* * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player ## # PS-040 Expand & Collapse Cards Add an expand / collapse section to inject some interactivity
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-040`** section to your page * [ ] Modify the list by updating the **`Block Item settings`**. Add, update, delete or re-order items in the list by using the Block settings. * [ ] Optionally open the section's **`Color & Style`** settings group and change the *color settings* * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player ### Watch the Video Tutorial {% embed url="" %} # PS-041 Expand & Collapse Cards 2 Add an expand / collapse section to inject some interactivity
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-041`** section to your page * [ ] Modify the list by updating the **`Block Item settings`**. Add, update, delete or re-order items in the list by using the Block settings. * [ ] Optionally open the section's **`Color & Style`** settings group and change the *color settings* * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player ### # PS-042 Banner With Background Image This banner has a background image with a gradient and animated arrow
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PS-042`** section to your page * [ ] **Open up the section's `Headings` settings group** and modify the text settings * [ ] Open the section's **`Image` settings group** and replace the placeholder image. The recommended image dimensions are shown in the image * [ ] Optionally open the section's **`Color`** settings group and change the colors you wish to use * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player ## # Effects Snips # ES-001 Confetti Cannon ES-001 - Blast some colored confetti when a lesson starts or is completed
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`ES-001`** section to your page * [ ] **Open up the section's `Trigger` settings group** and choose if you want the effect to show when the lesson is completed or the lesson is started * [ ] Open the section's **`Colors`** settings group and change the mode to Custom if you wish to control the color combinations or choose one of the included themes * [ ] Open the **`Size and Quantity`** settings group and adjust how large the confetti should be as well as how much confetti should be shown * [ ] Hover over the section and click on the **`Show Effect`** button to preview what the Player Snip will look like * [ ] Hover over the section and click the **`Copy Player`**` ``Snip` button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} It is recommended to place this snippet at the bottom of the code view. When not in code view it is invisible and could potentially be removed by accident. Be sure be careful when editing content around this Player Snip {% endhint %} ## How to use custom colors: {% embed url="" %} * [ ] Make sure you have selected Custom for the color theme * [ ] Then use the color pickers and choose your colors for all of the 6 color settings. Each color shown in this area will be used. If you want to have more of one color, then use more of the color pickers for that color ## # ES-002 Emoji Cannon ES-002 - Blast a fun collection of emojis when a lesson is started or completed
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`ES-002`** section to your page * [ ] **Open up the section's `Trigger` settings group** and choose if you want the effect to show when the lesson is completed or the lesson is started * [ ] Open the section's **`Emojis`** settings group and change the mode to Custom if you wish to control the emoji combinations or choose one of the included themes * [ ] Open the **`Size and Quantity`** settings group and adjust how large the emojis should be as well as how many emojis should be shown * [ ] Hover over the section and click on the **`Show Effect`** button to preview what the Player Snip will look like * [ ] Hover over the section and click the **`Copy Player`**` ``Snip` button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} It is recommended to place this snippet at the bottom of the code view. When not in code view it is invisible and could potentially be removed by accident. Be sure be careful when editing content around this Player Snip {% endhint %} ## How to use custom emojis: {% embed url="" %} * [ ] Be sure to select "Custom" for the theme setting and then paste in your own combination of emojis in the setting below * [ ] You can copy/paste emojis from your emoji keyboard or use an online tool like: The combinations are entirely up to you! # ES-003 Sound Effects ES-003 Play a sound effect when a lesson is started or completed
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`ES-003`** section to your page * [ ] **Open up the section's `Trigger` settings group** and choose if you want the effect to show when the lesson is completed or the lesson is started * [ ] Open the **`Sound`** settings group and choose one of the included sound effects to use. You can also add your own link to a custom MP3 sound effect by choosing the Custom option and then providing the url. * [ ] Hover over the section and click on the **`Show Effect`** button to preview what the Player Snip will look like * [ ] Hover over the section and click the **`Copy Player`**` ``Snip` button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} It is recommended to place this snippet at the bottom of the code view. When not in code view it is invisible and could potentially be removed by accident. Be sure be careful when editing content around this Player Snip {% endhint %} ### How to use a custom sound effect You can trigger your own custom sound effect by providing a url to an MP3 file. We have provided a convenient method for uploading an MP3 and obtaining the URL to it. * [ ] Download or produce a short MP3 file that is intended for a sound effect. You can Google many sites to download free sound effects. Here is one that we like: [https://www.101soundboards.com](https://www.101soundboards.com/boards/26542-ringtones-and-notification-sounds-soundboard) * [ ] Use the container in the settings group and select the **`Upload File`** icon in the toolbar (it's the one that looks like a document) * [ ] Once the file is uploaded, then **right click** on the link and select `Copy Link address` * [ ] Then paste it into the **`Custom MP3 Url`** setting * [ ] Be sure to also choose `Custom` in the settings drop down # ES-004 Link Effects Use this Player Snip to create text with link effects
**Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`ES-004`** section to your page * [ ] **Open up the section's `Text` settings group** and create some text. Insert links using the built in link tools * [ ] Open the section's **`Color & Style`** settings group and change the *Link Default Style* and Link Style. If you would like to use custom colors, change the Color Mode to `Custom` * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] Preview this snippet from the actual site page, Site Builder does not allow. hovering and you will not be able to see the hover effect on links. * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player # Popup Snips # PU-001 Typeform PU-001 **Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PU-001`** section to your page * [ ] **Open up the section's `Trigger` settings group** and choose if you want the effect to show when the lesson is completed or the lesson is started * [ ] Open the **`Typeform settings group`** and update the settings * [ ] Typeform Id : Make sure you have your Typeform form published and then paste in the Typeform form id . Check the instructions below on how to get the Typeform ID * [ ] Select the Type option: * [ ] Slider : will open a popup that slides in from the right side of the screen. The student will be able to close this popup * [ ] Popover : will create a floating icon in the lower right corner that will remain open once it is displayed. The student will not be able to close this once it is open. * [ ] Popup : will open a large popup window. The student will be able to close this Typeform. * [ ] Sidetab : will open a "drawer" with a button. The button will be always visible once it is open. The student will not be able to close it. * [ ] Button Color: the color of the button (Side tab and Popover) * [ ] Button Icon: the text that will be shown for the button (Side tab and Popover) * [ ] Hover over the section and click on the **`Show Effect`** button to preview what the Player Snip will look like * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} It is recommended to place this snippet at the bottom of the code view. When not in code view it is invisible and could potentially be removed by accident. Be sure be careful when editing content around this Player Snip {% endhint %} **How to get the Typeform ID**
## Hidden Fields This Player Snip will automatically pass the students First Name, Last Name, Email as [hidden Typeform Fields](https://www.typeform.com/help/a/using-hidden-fields-360052676612/). These fields can be used to personalize the questions that is shown in the form, or can be used as data fields that gets captured in the responses. Typeform does not use these hidden fields in the actual form fields. Be sure to read how to use Type Form Hidden fields: {% embed url="" %}
{% endembed %} ### How to Use Hidden Fields: * [ ] On your Typeform, add the following hidden field names * [ ] first\_name * [ ] last\_name * [ ] email * [ ] In your Typeform questions you can add this information in the question using the @first\_name smart text * [ ] Player Snips will automatically send these hidden fields # PU-002 Emoji Bar PU-002 **Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PU-002`** section to your page * [ ] **Open up the section's `Trigger` settings group** and choose if you want the effect to show when the lesson is completed or the lesson is started * [ ] Open up the **`Emoji & Headings settings group`** and type in your Emoji and short text message. * [ ] For Emojis, you can easily copy and paste an Emoji from [https://emojikeyboard.io/ ]() * [ ] When you place `{name}` into the heading text, the students name will be inserted automatically. * [ ] Optionally make the popup clickable, by opening the **`Call to Action settings group`** and enabling the option to make it clickable. Also be sure to provide a link. If this option is disabled, then the popup will be close instantly when the student clicks on it. * [ ] Open the **`Colors settings group`** and adjust the colors for the background and text * [ ] Open up the **`Display and Visibility settings group`** and adjust the settings * [ ] **Position** : choose where the popup should be displayed * [ ] **Shape** : choose the shape of the popup * [ ] **Delay to show**: This is the number of seconds the popuo will be displayed after the Trigger event happens * [ ] **Auto closing**: Enable auto closing by selecting the Should this auto close ? option and then select the amount if time it will remain open * [ ] **Sound Effect**: Enable a sound effect when the popup opens by enabling the option and then choose either a built in sound effect inside the Theme drop down or choose Custom and provide a link to an MP3 file to play. See the guide below on how to use your own sound effects. * [ ] Hover over the section and click on the **`Show Effect`** button to preview what the Player Snip will look like * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} It is recommended to place this snippet at the bottom of the code view. When not in code view it is invisible and could potentially be removed by accident. Be sure be careful when editing content around this Player Snip {% endhint %} ### How to use a custom sound effect You can trigger your own custom sound effect by providing a url to an MP3 file. We have provided a convenient method for uploading an MP3 and obtaining the URL to it. * [ ] Download or produce a short MP3 file that is intended for a sound effect. You can Google many sites to download free sound effects. Here is one that we like: [https://www.101soundboards.com](https://www.101soundboards.com/boards/26542-ringtones-and-notification-sounds-soundboard) * [ ] Use the container in the settings group and select the **`Upload File`** icon in the toolbar (it's the one that looks like a document) * [ ] Once the file is uploaded, then **right click** on the link and select `Copy Link address` * [ ] Then paste it into the **`Custom MP3 Url`** setting * [ ] Be sure to also choose `Custom` in the settings drop down # PU-003 Avatar Bar PU-003 **Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PU-003`** section to your page * [ ] **Open up the section's `Trigger` settings group** and choose if you want the effect to show when the lesson is completed or the lesson is started * [ ] Open up the **`Image & Headings settings group`** and upload your image and short text message. * [ ] The recommended image size is a 1:1 aspect ratio like 200x200. This image will automatically turn into a circle. * [ ] When you place `{name}` into the heading text, the students name will be inserted automatically. * [ ] Optionally make the popup clickable, by opening the **`Call to Action settings group`** and enabling the option to make it clickable. Also be sure to provide a link. If this option is disabled, then the popup will be close instantly when the student clicks on it. * [ ] Open the **`Colors settings group`** and adjust the colors for the background and text * [ ] Open up the **`Display and Visibility settings group`** and adjust the settings * [ ] **Position** : choose where the popup should be displayed * [ ] **Shape** : choose the shape of the popup * [ ] **Delay to show**: This is the number of seconds the popuo will be displayed after the Trigger event happens * [ ] **Auto closing**: Enable auto closing by selecting the Should this auto close ? option and then select the amount if time it will remain open * [ ] **Sound Effect**: Enable a sound effect when the popup opens by enabling the option and then choose either a built in sound effect inside the Theme drop down or choose Custom and provide a link to an MP3 file to play. See the guide below on how to use your own sound effects. * [ ] Hover over the section and click on the **`Show Effect`** button to preview what the Player Snip will look like * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} It is recommended to place this snippet at the bottom of the code view. When not in code view it is invisible and could potentially be removed by accident. Be sure be careful when editing content around this Player Snip {% endhint %} ## # PU-004 Animation Bar PU-004 **Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PU-004`** section to your page * [ ] **Open up the section's `Trigger` settings group** and choose if you want the effect to show when the lesson is completed or the lesson is started * [ ] Open up the **`Animation & Headings settings group`** and provide your animation link and short text message. * [ ] Provide a Lottie Url for your animation. [Read the guide ](/how-to-guides#how-to-get-a-lottie-animation-url)on how to get this. * [ ] When you place `{name}` into the heading text, the students name will be inserted automatically. * [ ] Optionally make the popup clickable, by opening the **`Call to Action settings group`** and enabling the option to make it clickable. Also be sure to provide a link. If this option is disabled, then the popup will be close instantly when the student clicks on it. * [ ] Open the **`Colors settings group`** and adjust the colors for the background and text * [ ] Open up the **`Display and Visibility settings group`** and adjust the settings * [ ] **Position** : choose where the popup should be displayed * [ ] **Shape** : choose the shape of the popup * [ ] **Delay to show**: This is the number of seconds the popuo will be displayed after the Trigger event happens * [ ] **Auto closing**: Enable auto closing by selecting the Should this auto close ? option and then select the amount if time it will remain open * [ ] **Sound Effect**: Enable a sound effect when the popup opens by enabling the option and then choose either a built in sound effect inside the Theme drop down or choose Custom and provide a link to an MP3 file to play. See the guide below on how to use your own sound effects. * [ ] Hover over the section and click on the **`Show Effect`** button to preview what the Player Snip will look like * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} It is recommended to place this snippet at the bottom of the code view. When not in code view it is invisible and could potentially be removed by accident. Be sure be careful when editing content around this Player Snip {% endhint %} ## # PU-005 Image Card PU-005 **Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PU-005`** section to your page * [ ] **Open up the section's `Trigger` settings group** and choose if you want the effect to show when the lesson is completed or the lesson is started * [ ] Open up the **`Image & Headings settings group`** and upload your image and text messages * [ ] The image size will determine effect the height of the card and will be shown in it's entirety. Recommended 16:9 aspect ration like 760x420 * [ ] When you place `{name}` into the heading or subheading text, the students name will be inserted automatically. * [ ] When text and image options are deleted, they will not be shown * [ ] Optionally make the popup clickable, by opening the **`Call to Action settings group`** and enabling the option to make it clickable. Also be sure to provide a link. If this option is disabled, then the popup will be close instantly when the student clicks on it. * [ ] Open the **`Colors settings group`** and adjust the colors for the background and text * [ ] Open up the **`Display and Visibility settings group`** and adjust the settings * [ ] **Position** : choose where the popup should be displayed * [ ] **Shape** : choose the shape of the popup * [ ] **Delay to show**: This is the number of seconds the popuo will be displayed after the Trigger event happens * [ ] **Auto closing**: Enable auto closing by selecting the Should this auto close ? option and then select the amount if time it will remain open * [ ] **Sound Effect**: Enable a sound effect when the popup opens by enabling the option and then choose either a built in sound effect inside the Theme drop down or choose Custom and provide a link to an MP3 file to play. See the guide below on how to use your own sound effects. * [ ] Hover over the section and click on the **`Show Effect`** button to preview what the Player Snip will look like * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} It is recommended to place this snippet at the bottom of the code view. When not in code view it is invisible and could potentially be removed by accident. Be sure be careful when editing content around this Player Snip {% endhint %} # PU-006 Loom Card PU-006 **Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PU-006`** section to your page * [ ] **Open up the section's `Trigger` settings group** and choose if you want the effect to show when the lesson is completed or the lesson is started * [ ] Open up the **`Loom & Headings settings group`** and provide your Loom Video ID and text messages * [ ] Create a video with Loom.com, then grab the id. This is the last part of the Loom video url when viewing it. For example highlighted: 6d2073561da94ce7be9f76942798fc1b * [ ] When you place `{name}` into the heading or subheading text, the students name will be inserted automatically. * [ ] When text are deleted, they will not be shown * [ ] Optionally make the popup clickable, by opening the **`Call to Action settings group`** and enabling the option to make it clickable. Also be sure to provide a link. If this option is disabled, then the popup will be close instantly when the student clicks on it. * [ ] Open the **`Colors settings group`** and adjust the colors for the background and text * [ ] Open up the **`Display and Visibility settings group`** and adjust the settings * [ ] **Position** : choose where the popup should be displayed * [ ] **Shape** : choose the shape of the popup * [ ] **Delay to show**: This is the number of seconds the popuo will be displayed after the Trigger event happens * [ ] **Auto closing**: Enable auto closing by selecting the Should this auto close ? option and then select the amount if time it will remain open * [ ] **Sound Effect**: Enable a sound effect when the popup opens by enabling the option and then choose either a built in sound effect inside the Theme drop down or choose Custom and provide a link to an MP3 file to play. See the guide below on how to use your own sound effects. * [ ] Hover over the section and click on the **`Show Effect`** button to preview what the Player Snip will look like * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} It is recommended to place this snippet at the bottom of the code view. When not in code view it is invisible and could potentially be removed by accident. Be sure be careful when editing content around this Player Snip {% endhint %} # PU-007 Animation Card PU-007 **Adding this Player Snip** * [ ] On your [`My Player Snips Page`](/how-to-guides#how-to-create-a-my-snips-page) add the **`PU-007`** section to your page * [ ] **Open up the section's `Trigger` settings group** and choose if you want the effect to show when the lesson is completed or the lesson is started * [ ] Open up the **`Animation & Headings settings group`** and provide your animation link and short text message. * [ ] Provide a Lottie Url for your animation. [Read the guide ](/how-to-guides#how-to-get-a-lottie-animation-url)on how to get this. * [ ] When you place `{name}` into the heading text, the students name will be inserted automatically. * [ ] Optionally make the popup clickable, by opening the **`Call to Action settings group`** and enabling the option to make it clickable. Also be sure to provide a link. If this option is disabled, then the popup will be close instantly when the student clicks on it. * [ ] Open the **`Colors settings group`** and adjust the colors for the background and text * [ ] Open up the **`Display and Visibility settings group`** and adjust the settings * [ ] **Position** : choose where the popup should be displayed * [ ] **Alignment**: choose how you want the text aligned * [ ] **Shape** : choose the shape of the popup * [ ] **Delay to show**: This is the number of seconds the popuo will be displayed after the Trigger event happens * [ ] **Auto closing**: Enable auto closing by selecting the Should this auto close ? option and then select the amount if time it will remain open * [ ] **Sound Effect**: Enable a sound effect when the popup opens by enabling the option and then choose either a built in sound effect inside the Theme drop down or choose Custom and provide a link to an MP3 file to play. See the guide below on how to use your own sound effects. * [ ] Hover over the section and click on the **`Show Effect`** button to preview what the Player Snip will look like * [ ] Hover over the section and click the **`Copy Player Snip`** button * [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into * [ ] Put your cursor in the location that you wish to place this snippet * [ ] Open up the < > code viewer * [ ] Paste the snippet * [ ] Click the < > code button to return to the normal preview * [ ] Click Save to save the lesson * [ ] Preview the lesson inside the course player {% hint style="info" %} It is recommended to place this snippet at the bottom of the code view. When not in code view it is invisible and could potentially be removed by accident. Be sure be careful when editing content around this Player Snip {% endhint %} # Support Options ### 1) Primary Support : Facebook Group Here are some types of questions or problems to post inside the [**Super PowerUps Facebook group**](https://www.facebook.com/groups/superpowerups) **:** * *How do I ....* * *I can't seem to get this to work...* * *I am confused by...* * *I can't find....* Basically for any trouble using the our PowerUps - please post a question [inside the Facebook Group](https://www.facebook.com/groups/superpowerups). This way everyone can leverage the information shared by us and possibly others can also provide input into how they are using their super powers. #### When posting a "help me" type of message inside the Facebook group: * [ ] Describe the steps you are taking to see the issue. * [ ] Specify the PowerUp Name (and super section) you are using * [ ] Detail "what you are trying to achieve" as well (so we know if you are using the correct super power) * [ ] Provide a screen shot and even better a [Loom](https://www.loom.com/) screen recording * [ ] Provide a link if possible {% hint style="info" %} Issue resolution starts with **clearly understanding your problem** or question. So the clearer and more precise you are in not only describing the issue, but also what exactly you are trying to achieve goes a long way into a quick resolution. The best way to report issues is to share a screen recording video. This way you can actually describe and show at the same time. Plus it is much quicker for you as well, because you do not have to type a long message. We love :heart\_eyes: screen recordings and issues that include them quickly go to the top of the priority list. Use [Loom](https://www.loom.com/) or other free tools, to quickly and easily share a screen recording. {% endhint %} If the issues needs to "move to support" because of access information or you would rather not reveal your site or issue - then we will continue the conversation as a [support ticket.](httpssupport.superpowerups.com://) ### 2) Support Tickets Filing a [support ticket ](https://powerups.atlassian.net/servicedesk/customer/portal/1)should be used for the following types of issues * Account problems (can't log in, unable to install or access purchased products) * Billing questions * Issues that require sharing sensitive information As with posting an issue to the Facbeook group, we ask that you provide as much detail as possible when reporting the problem. * Describe the steps you are taking to see the issue. * Specify the PowerUp Name (and super section) you are using * Detail "what you are trying to achieve" as well (so we know if you are using the correct super power) * Provide a screen shot and even better a [Loom](https://www.loom.com/) screen recording * Provide a link if possible # Licensing ### If you purchased just this PowerUp (Stand alone version): * You are entitled to install a just this PowerUp into one Thinkific site. * If you uninstall this PowerUp app from your Thinkific site, you will not be able to reinstall it or move your license to another site without contacting support first. ### If you are a PowerPass member: * You are entitled to all available PowerUp's as long as your subscription is current * You are entitled to install any PowerUp into one Thinkific site. * If you uninstall this PowerUp from your Thinkific site, you will not be able to reinstall it or move your license to another site without contacting support first. * If you cancel your PowerPass subscription, you will still have access to any installed PowerUp from your Thinkific site as long as you have kept it installed. You will also receive future updates to the installed PowerUps going forward. ### If you have purchased an [Agency License](https://www.superpowerups.com/pages/for-agencies): * You are entitled to all available PowerUp's as long as your subscription is current * You are entitled to install a any PowerUp into unlimited Thinkific sites (yours or your clients). * If you uninstall this PowerUp from your Thinkific site, you will be able to reinstall it or move your license to another site. * If you cancel your Agency License subscription, you will still have access to any installed PowerUp from your Thinkific sites as long as you have kept it installed. You will also receive future updates to installed PowerUps going forward. # Uninstalling Please tell me it's not true - say it ain't so. **Do you really want to remove this super power** from your site? You realize you will lose all of that super power strength β€‹πŸ¦Έ that you once had, don't you?β€Œ Ok, well if you really really want to, the instructions are below β€‹πŸ‘‡ ## β€‹β€‹πŸ¦Ή Here is how to lose your super powersπŸ‘‡β€Œ Head over to your apps page inside of your site * Locate the :boom: **PowerUp** and click the *nasty red trash can button to uninstall the app* One more warning here - if you uninstall this PowerUp, you will not be able to reinstall it on another site unless you have purchased the PowerUps Agency License. β€‹β€Œ ​![](https://media.giphy.com/media/UQaRUOLveyjNC/giphy.gif)β€Œ ## β€‹β€‹πŸ‘‹ So long β€‹πŸ˜­ If you are having "click remorse" right about now and realize you made a bad decision, then just [reach out to support](http://support.robgalvin.co/) with the details and we will see about getting your super powers restored β€‹πŸ¦Έ