Integration Docs

Comprehensive guide and documentation to help you start working with smallcase Gateway

Get Started

SST oEmbed

What is a stock oEmbed?

stock oEmbed is a mechanism to add stock transactions to existing web pages with ease. We currently support 4 methods of embedding.

  1. Embed a generated snippet from the Dashboard
  2. Wrap a ticker in custom markup
  3. Attach transaction action to your existing CTAs
  4. Using oEmbed payloads for oEmbed enabled sites

In all of these cases, you are required to add our embed script to the webpage using the following code -

<script async src="https://www.gateway-tt.in/assets/embed.js"></script>

Steps for Embedding snippet from the dashboard

  1. Go to Dashboard
  2. Add config for your intended transaction
  3. Click on 'GET CODE' and check the Preview
  4. Click on 'COPY CODE' to copy the snippet to your clipboard
  5. Paste the copied snippet in your HTML file

How to wrap a ticker in custom markup?

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 </script>
  • The span must have class="sc-hover"
  • The element can have 3 optional data attributes
  1. data-cardsize = big | small
  2. data-ordertype = BUY | SELL
  3. data-quantity = [number of stocks]

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

Example usage

Visit the SC EMBED DEMO.

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.

How to enable stock oEmbed provider for WordPress?

For WordPress, embedding smallcase cards can be as easy as pasting the link (URL) generated from the dashboard. But to enable this mechanism, you need to enable the stock oEmbed provider for WordPress. This can be done in 2 ways.

  1. Using our smallcaseEmbed plugin for wordpress
  2. Or, adding a few lines of code to your WordPress theme

How to install the smallcaseEmbed WordPress plugin?

📘

Note

We recommend this method of installing the plugin to enable oEmbed because that's easier and less error-prone.

To install and activate the smallcaseEmbed WordPress plugin, please follow the steps listed below.

  1. Download the smallcaseEmbed WordPress plugin (zip file).
  2. In your WordPress dashboard, open the Plugins section.
  3. Click the Add New button next to the heading Plugins at the top of the page.
  4. Click the Upload Plugin button next to the heading Add Plugins at the top of the page.
  5. Upload the smallcaseEmbed.zip in the file upload dialogue.
  6. Now the plugin will be installed and you will get a success/failure message in the next screen.

How to enable stock oEmbed provider for WordPress from code?

❗️

Note

This method is not recommended. However, we will provide instruction for the benefit of advanced users.

  1. Open the folder containing the current theme of your WordPress site.
    This can be done from the WordPress dashboard as well as from any file browser.
    The themes are located in the wp-content/themes folder. Open the subfolder containing the current theme in use.
  2. Open functions.php of the current theme in your text editor of choice, this can be opened in the WordPress dashboard as well.
  3. Add the following snippet to the end of the functions.php file
wp_oembed_add_provider( "https://www.gateway-tt.in/trade*", "https://www.gateway-tt.in/oembed"); 
wp_oembed_add_provider( "https://gateway-tt.in/trade*", "https://www.gateway-tt.in/oembed");

Updated about a month ago

SST oEmbed


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.