There are two things required to display smallcase cards on any webpage:
- an embed script
- 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
class
- must have a value
sc-embed
- must have a value
data-smallcase
- must have a value
true
- must have a value
data-scid
- any valid smallcase
- scid every smallcase is allocated a unique id
Optional attributes
data-cta
- whether to show "View smallcase" or "Invest now" as primary CTA button
- can have value
invest
(default) orview
data-cardsize
- whether to display a smaller card (portrait) or big card (landscape)
- can have value
small
(default) orbig
- big card will be displayed as smaller one on mobile and tablet devices
data-viewon
- whether to display on microsite or sc.com
- If the attribute is present, the user will be redirected to .smallcase.com
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"
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>
Updated 2 months ago