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.

Quick Walkthrough

1. Look for the Stock Widget you want to use from TradingView, customize it, and copy the embed code.
2. Go to jsfiddle.net, paste the code under the HTML field, and click Run.
3. You will see a preview of the widget. Right-click on it and click Inspect.
4. A new window will open. From there, look for the iframe element that contains src="https://s.tradingview.com....". 
5. Then, right-click and select copy outerHTML.
6. Go to the SharePoint page where you want to add the stock widget and click Edit.
7. Insert the Code Design Element.
8. Paste the outerHTML into the HTML field.
9. Go to the Design tab and disable Sandbox mode.
10. Click the green check mark to apply your changes.
11. Select Save to keep your changes.

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Part 1: Get the outerHTML code
    • Step 1: Customize the Stock Widget to Use
    • Step 2: Copy the Embed Code
    • Step 3: Inspect Code
    • Step 4: Copy OuterHTML 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 on your SharePoint pages.

Part 1: Get the outerHTML code

This part demonstrates how to retrieve the outerHTML code.

Step 1: Customize the Stock Widget to Use

• Look for the Stock Widget you want to use from TradingView. For this guide, we will use their Ticker tape widget:

NOTEYou can use any stock widget you want but the steps in this tutorial will be specific to the stock widgets found on TradingView.

Customize the Ticker according to your preferences and click Apply:

Step 2: Copy the Embed Code

• Then, click Copy to get the embed code:

Step 3: Inspect Code

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

Step 4: Copy OuterHTML code

• A new window will open. From there, look for the iframe element that contains src="https://s.tradingview.com....":

• Then, right-click and select Copy outerHTML:

You have now successfully retrieved the outerHTML. 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 copied outerHTML 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:

• Select the ShortPoint tag:

• 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 copied outerHTML into 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 the eye icon to see your page in real-time:

• 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