What is a stock oEmbed (Shortcode)?

Shortcodes allow you to display stock or ETF information & enable transactions directly on your website. It's as simple as copy-pasting a URL or code snippet!

You can head to Shortcode generator to create a shortcode & preview it live.

Different ways to embeds

1. Embed an HTML snippet generated from the Shortcode dashboard
2. Paste embed URL generated from the Shortcode dashboard in oEmbed supported websites (like WordPress, Medium)
3. Wrap a ticker in custom markup
4. Attach transaction action to your existing CTAs

1. HTML Embeds

1. Go to Shortcode dashboard
2. Add config for your intended transaction
3. Click on 'COPY CODE' to copy the snippet to your clipboard
4. Paste the HTML code snippet in your website code

2. URL Embeds

1. Go to the Shortcode dashboard
2. Add config for your intended transaction
3. Click on 'COPY URL' to copy the snippet to your clipboard
4. Paste the URL in any website supporting oEmbed (Eg. WordPress)

💁‍♂️ If you want to embed using URL on WordPress, as a one-time setup, you will need to install our oEmbed support plugin.

3. Wrapping a ticker with custom markup

Rather than showing an embed card on page load, you can make it visible only on the hover of a ticker. You can wrap tickers on your page in custom markup as shown in the following code. This will make the ticker hoverable. When the user hovers on the ticker they will see a popover with the details of the stock and a CTA.

<span class="sc-hover" data-cardsize="big" data-quantity="2" data-ordertype="BUY">TCS</span>
<script async src="https://www.gateway-tt.in/assets/embed.js"></script>

• Your HTML element must have "sc-hover" as one of the class
• The element can have 3 optional data attributes

1. data-cardsize = big | small
2. data-ordertype = BUY | SELL
3. data-quantity = [number of stocks]

4. How to attach transaction action to existing CTAs?

This method is similar to the one above. It adds an onClick handler to existing clickables (like buttons, anchors).

1. Add class="sc-hover" to your clickable
2. Add data-ticker="[stock ticker]" to the clickable
3. Optionally add data-quantity and data-ordertype as described in the previous method

How to use this mechanism in SPAs (like React / Angular / Vue)?

The script exposes a method window.scEmbedController.load(). You need to call this method after your components are mounted to the DOM. In case of React, while using snippets from the dashboard, you need to add the snippet as dangerouslySetInnerHTML.