How to Insert a Stock Widget to a SharePoint Page using the ShortPoint Code Design Element

This tutorial demonstrates how to insert a Stock widget from TradingView into a SharePoint page using the Code Design Element.

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Part 1: Get the Embed code
    • Step 1: Customize the Stock Widget to Use
    • Step 2: Copy Share by Link
    • Step 3: Get Embed Code
  • Part 2: Add the Stock Widget
    • Step 1: Edit ShortPoint Web Part
    • Step 2: Insert the Code Design Element
    • Step 3: Paste code
    • Step 4: Disable Sandbox Mode
    • Step 5: Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed in your SharePoint environment.
• You must be a ShortPoint Designer with an active license.

Step-by-step Tutorial

The steps have been divided into two parts. Follow closely to learn how to add a stock widget to your SharePoint pages.

Part 1: Get the Embed code

This part demonstrates how to get the embed code

Step 1: Customize the Stock Widget to Use

• Go to Elfsight and click Create Widget for Free:

NOTEYou can use any stock widget you want but the steps in this tutorial will be specific to the stock widgets found on Elfsight. To use Elfsight stock widgets, you must also have an Elfsight account.

• Look for the Stock Widget you want to use and select Continue with this template:

• Customize the Ticker according to your preferences:

• Click Add to website for free:

Step 2: Copy Share by Link

• You will be redirected to a new page. Click Close:

• Then, select the More Actions icon:

• Select Share by Link:

• Copy the link:

Step 3: Get Embed Code

• Replace SHARED_LINK in the embed code below with the shared link you copied in the previous step:

<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.10/iframeResizer.min.js"></script>
<iframe onload="iFrameResize(this)" src="SHARED_LINK"></iframe>

• Your code will now look like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.10/iframeResizer.min.js"></script>
<iframe onload="iFrameResize(this)" src="https://b814f3336a7a4e688cd1f7c71eac8c61.elf.site" style="border:none;width:100%;"></iframe>

You now have an embed code. Make sure to take note of this, as you will need it in Part 2.

Part 2: Add the Stock Widget

This part will demonstrate how to add the embed code to your SharePoint page.

Step 1: Edit ShortPoint Web Part

• Go to the SharePoint page where you want to insert the stock widget and click Edit:

• Close the Toolbox:

• Click the Edit properties icon:

Step 2: Insert the Code Design Element

• Choose where you want to insert the Code Design Element and click the plus icon to open the library of Design Elements:

• Use the search bar to look for Code and select it:

Step 3: Paste code

• Paste the embed code in the HTML field and customize it according to your needs:

Step 4: Disable Sandbox Mode

• Go to the Design tab:

• Disable Sandbox mode:

Step 5: Save

• Click the green check mark to apply your changes:

• Click Save to keep your changes:

There you have it! You now have a stock widget on your SharePoint page.

Related articles:

• How to Insert a Web Page Animation into SharePoint Using the ShortPoint Code Design Element
• How to Add Canva Designs into a SharePoint Site Using the ShortPoint Code Design Element
• How to Insert a Digital Clock into a SharePoint Page Using the ShortPoint Code Design Element
• How to Embed a Viva Engage Custom Feed to the SharePoint Page Using ShortPoint Code Design Element
• The Value of Motion Design: How to Use CodePen Codes in Modern SharePoint Pages
• How to Add Lottie Animations in the ShortPoint Code Design Element