Documentation - Clap

Clap is complex in terms of styling so that we have opened the way to adjust the size of the clap component now and the more control over the look and feel will come in future releases.

Note: Place the script tags inside your head tag. And component tag where you want to display the clap form. You can place N number of claps in single page but all of the instance will be consider single id means all of them loads same count.

Clap

<script src="https://blogstreak.com/static/components/clap.js" type="module"></script> <blogstreak-clap></blogstreak-clap>

Options

Attributes Explanation
pathid

If not provide it take the value from window.location.pathname

If provide then it will use that value instead of the location.pathname.


This is useful if you change the blog post url frequently.

title

Visual identification in Blogstreak dashboard. If not provide blogstreak will use url for display.

Stylings

Since blogstreak clap created using web component. It adapts the CSS custom proeprties method to change the styling.

Variable Default Description
--clap-width-height 71px Change the clap container width and height
--clap-svg-width 28px Change the clap hand svg width
--clap-counter-top 0px This represent the top counter number. Use the negative value here.
--clap-counter-left 40px Total counter value that on the left.
--clap-color #27ae60 Change the theme color of the clap component.
--clap-background-color #ffffff Sometime you will be using dark mode or your html background is not white in that case use this value

A hosted component library for your static blog.

© Copyright 2021 Blogstreak.