You have already learned how to use jQuery, add chat and weather widgets, third party resource single videos to your page with ShortPoint Code Design Element from our Example Use Cases for ShortPoint Code Design Element: Part 1 solution.

 

In this article we will show you more useful examples. Using Code Design Element you can also add:

  • Google Tag Manager:



  • web page animation:



  • stock ticker widgets:



Note: Very soon ShortPoint will have a brand-new Stock Design Element. Stay tuned :)


  • video playlists:




To embed the element from the other sites, you need to get and copy the code (step 1) and paste it to your Code Design Element (step 2). Please see the details below.


TABLE OF CONTENTS


Before we begin


Step 1: Copy the embed code

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 opening the Workspace tab:



Please note, that it may take up to 24 hours for the data to come through, so the Google Tag Manager starts working on your page. 

Note: 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 add 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>


  • 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>



1.3. Adding stock ticker widgets


You can add stock or other ticker widgets to your page, using the widget snippets from 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.


Choose the widget you would like to embed on your SharePoint page and click Copy button to get the code snippet:



Adjust the settings and click Apply:



Then copy code from the Embed code section:



Here is an example of code for Symbol Info Widget:

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div class="tradingview-widget-container__widget"></div>
<div class="tradingview-widget-copyright"><a href="https://es.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text"> AAPL Información del símbolo</span></a> por TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-symbol-info.js" async>
{
"symbol": "NASDAQ:AAPL",
"width": "1000",
"locale": "es",
"colorTheme": "dark",
"isTransparent": false
}
</script>
</div>
<!-- TradingView Widget END -->



1.4. Adding video playlists

You already know how to add single videos to your page. For that you can:


With help of Code Design Element it is also possible to add video playlists to your page. 

Below are the examples on 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 Embed option:



4. Embed video option will open. Click Copy button:



To make sure that you have copied the embed code for playlist, not a single video, 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>


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


1. Open the showcase from the Vimeo videos page.

2. In the showcase settings, select Embed option under the Destinations category. 



3. The playlist's embed settings will open: 

  • Dimensions - Choose whether you wish your playlist 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:



4. Once you have set Dimensions and Playback options, click Copy button to get the embed code snippet.



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


1. Go back to your Code Design Element and paste the copied code to the respective code language fields. 

2. You will see the embedded element in the Preview section or you can as well click Preview button to check how it will look like on your page.

3. Click Insert/Update and save the page.



Example


Here is the example of the page with the Code Design Elements: video playlist, stock widgets and Google Tag Manager:



Related articles: