Try ShortPoint nowYou have already learned how to use jQuery, add chat and weather widgets, and third-party resource single videos to your page with ShortPoint Code Design Element. In this article, we will show you more useful examples. By using the Code Design Element, you can also add:
- Google Tag Manager:
- Web page animation:
- Stock ticker widgets:
- video playlists:
TABLE OF CONTENTS
Before we begin
- To learn how to use Code, please check this article: Introducing Code Design Element.
- The Code Design Element is available since the ShortPoint SPFx version 6.9.35.x. Make sure you have the latest version of ShortPoint SPFx installed.
- To check previous example use cases for Code Design Element, visit our Example Use Cases for ShortPoint Code Design Element: Part 1.
Step-by-step tutorial
Follow the steps below closely to get started:
Step 1: Copy the embed code
Copy the code that corresponds to the element you want to add to your page:
1.1. Adding Google Tag Manager
You can embed Google Tag Manager tool (GTM) to your SharePoint page to analyze traffic on your SharePoint pages, for example using it to track video plays.
Copy the following code, replacing GTM-XXXXXXX with your container ID:
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->You can find your GTM container ID by opening the Workspace tab:
Once you copy the code, proceed to step 2.
Note: It may take up to 24 hours for the data to come through. Find out more about adding Google Tag Manager to your website, following this link: Google Tag Manager > Developer Guide.
1.2. Adding web page animation
You can also add a web page animation to your page.
Below are some examples of fade-in animation on page load, copy one of them or add your own animation code.
- Background color changes from black to white, with 4 seconds duration:
<head>
<style>
body {
background-color: white;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {background-color: black;}
to {background-color: white;}
}
</style>
</head>
- The page will go from transparent to full opacity, with 5 seconds duration:
<body>
<style>
body {
animation: fadeIn ease 5s;
-webkit-animation: fadeIn ease 5s;
-moz-animation: fadeIn ease 5s;
-o-animation: fadeIn ease 5s;
-ms-animation: fadeIn ease 5s;
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
</style>
</body>
Once you copy the code, proceed to step 2.
1.3. Adding stock ticker widgets
You can add stock or other ticker widgets to your page using the widget snippets from the TradingView website.
From this website, you can copy embed codes of:
- Advanced Real-Time Chart Widget
- Technical Analysis Widget
- Market Overview Widget
- Market Data Widget
- Stock Market Widget
- etc.
Click the code icon to get the widget code:
Modify the Settings according to your preference and click Apply:
Once you are done, click Copy code:
Then, go to jsfiddle.net and paste the code under the HTML field:
Click Run:
You will see a preview of the widget. Right-click on it and click Inspect:
Look for the iframe element that contains src="https://s.tradingview.com....":
Right-click on the iframe element and click Copy outerHTML:
Once you copy the code, proceed to step 2.
1.4. Adding video playlists
You already know how to add single videos to your page. For that, you can:
- use Vimeo Design Element,
- use YouTube Design Element,
- embed videos from other third-party resources, like Brightcove, using Code Design Element (we explained how to do that in our Example Use Cases for ShortPoint Code Design Element: Part 1),
- embed the Microsoft Stream Video, using Code Design Element (check our Embed the Microsoft Stream Video into a SharePoint Page solution article).
With the help of Code Design Element, video playlists can be added to your page.
Below are examples of how to add playlists from YouTube and Vimeo.
Adding YouTube playlists
1. Open the playlist you would like to embed.
2. Click the Share button:
3. Select the Embed option:
4. Embed video option will open. Click Copy button:
To ensure that you have copied the embed code for the playlist, check the URL in the code. It should have videoseries?list=PLAYLIST_ID path right after the https://www.youtube.com/embed/ path, like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLx0sYbCqOb8TBPRdmBHs5Iftvv9TPboYG" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
5. Once you copy the code, proceed to step 2.
Note: Find out more about adding YouTube playlists to your website and modifying the URL, when viewing an individual video from a playlist, following this link: YouTube Help > Embed videos & playlists.
Adding Vimeo playlists
Open the showcase from the Vimeo videos page and select the Embed option under the Destinations category:
The playlist's embed settings will open:
- Dimensions - Choose whether you wish your playlist to be responsive or fixed;
- Playback - Choose playback options (enable continuous playback and/or loop playlist).
You will also see your playlist in the Preview section:
Once you have set Dimensions and Playback options, click the Copy button to get the embed code snippet:
Once you copy the code, proceed to step 2.
Note: Find out more about adding Vimeo playlists to your website, following this link: Vimeo > Embeddable Playlists.
Step 2: Update your Code Design Element with copied code
Go back to your Code Design Element and paste the copied code to the respective code language field. For this guide, we will paste the code in the HTML field:
Once you are satisfied, click the green checkmark:
Click Save to keep your progress:
Example
Here is an example of the page with the Code Design Elements: video playlist, stock widgets, and Google Tag Manager:
Related articles:
