There are two things required to display smallcase cards on any webpage:

1. an embed script
2. HTML element inside which the card should be loaded

Sample embed code

<p                
  class="sc-embed"
  data-smallcase="true"
  data-scid="TGIMO_0005"
  data-cardsize="big"
  data-cta="view"
  data-viewon="21ginvestments"
  data-source="moneycontrol"
  data-campaign="top-performing-oct20"
    style="max-width:100%;min-height:300px;display:flex;align-items:stretch;justify-content:center"
>
     <strong>21G Trend Rider by 21G Investments</strong>
</p>

<script async src="https://www.smallcase.com/embed/assets/embed.js"></script>

Embed script

Embed script has a primary task to load smallcase card iframe inside ALL valid HTML elements (having class of sc-embed) in the webpage

You just need to add this once in the webpage -

<script async src="https://www.smallcase.com/embed/assets/embed.js"></script>

📘

The script tag should be added only once per page, even if there are multiple embed code snippets integrated into the page.

HTML Tag

This is the element inside which smallcase card will be displayed.

For the card to load properly, there are some required attributes that must be passed. To further tweak the behavior of the card, there are optional attributes as well.

Required attributes

1. class
   • must have a value sc-embed
2. data-smallcase
   • must have a value true
3. data-scid
   • any valid smallcase
   • scid every smallcase is allocated a unique id

Optional attributes

1. data-cta
   • whether to show "View smallcase" or "Invest now" as primary CTA button
   • can have value invest (default) or view
2. data-cardsize
   • whether to display a smaller card (portrait) or big card (landscape)
   • can have value small (default) or big
   • big card will be displayed as smaller one on mobile and tablet devices
3. data-viewon
   • whether to display on microsite or sc.com
   • If the attribute is present, the user will be redirected to .smallcase.com
4. data-source & data-campaign
   • For better analytics, you can pass descriptive strings as values to these attributes
   • For example, data-source="your-website" data-campaign="article-name"
5. style
   • As per your need, you can choose to add CSS styles to the tag. This is useful when you want to handle the positioning of the card.
   • In the sample code, the

Do you need to add inside sc-embed element?

It's optional to add HTML element(s) inside the sc-embed element. If anything is added, it will be displayed as-is until the embed script loads. Once the embed script loads, it will replace the children element with an embed card.

We recommend that to add smallcase relevant textual info. inside span tag (for additional context to users with low internet speed)

For example, you can add this - <span>[smallcase-name] by [smallcase-creator]</span>