How can we help you today?

Example Use Cases for ShortPoint Code Design Element: Part 2

You 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:

tag Manager

  • Web page animation:

Web page animation

  • Stock ticker widgets:

stock ticker widget

  • video playlists:

video playlist


Before we begin

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 -->
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src=""
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:

tag Manager

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:
body {
background-color: white;
animation-name: example;
animation-duration: 4s;
@keyframes example {
from {background-color: black;}
to {background-color: white;}

  • The page will go from transparent to full opacity, with 5 seconds duration:
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;}

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:

code icon

Modify the Settings according to your preference and click Apply:


Once you are done, click Copy code:

Copy code

Then, go to and paste the code under the HTML field:

paste code in 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="":

iframe element

Right-click on the iframe element and click Copy outerHTML:

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:

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:

embed icon

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 path, like this:

<iframe width="560" height="315" src="" 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).

embed settings

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:

paste code

Once you are satisfied, click the green checkmark:

green check mark

Click Save to keep your progress:



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

Sample page with all elements

Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 69 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more