Embed smallcase Cards
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-viewoncreatorplatform="true"
data-source="your-website"
data-campaign="your-campaign"
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
- either
sc-embed
orsc-hover
. The latter displays smallcase card only when you hover over the element.
- either
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-viewoncreatorplatform
- whether to display on microsite or sc.com
- If the attribute is "true", the user will be redirected to .smallcase.com
data-source
&data-campaign
(optional)- 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.
Do I need to add anything inside HTML element containing "sc-embed" class?
It's optional to add HTML element(s) inside the element with class="sc-embed". If anything is added, it will be displayed as-is until the embed script loads. Once the embed script loads, it's replace the children element with an embed card.
We recommend that to add smallcase relevant textual information inside the span tag (for additional context to users with low internet speed). Something like - <span>[smallcase-name] by [smallcase-creator]</span>
Updated almost 3 years ago