EMBED ON WEBSITES
1. Add the following to the <head> tag of your website (only once).
<script src="https://tallyco.in/js/tallycoin-widget.js" type="text/javascript"></script>
2. Add the following to the main body of your website (multiple allowed).
<div class="tallycoin-widget" data-type="fundraiser" data-id="e51yzw"></div>
Previews
Customization
The widget looks at the
data-* attributes to determine what to do.
Eg #1,
data-type="profile" shows the profile panel and will retrieve information about the user set by
data-id="username".
Eg #2,
data-type="fundraiser" shows the fundraiser panel and will retrieve transaction information set by
data-id="fundraiser_id".
Call to Action
The purple button on the front panel is the 'call to action'. We can customize the text, for example, it can say 'donate now' or 'send a tip'.
We do this by adding the
data-action_text="some action text" attribute.
<div class="tallycoin-widget" data-type="fundraiser" data-id="e51yzw" data-action_text="some text" ></div>
Theme
Don't like the default light theme? We can add the
data-theme="dark" attribute.
<div class="tallycoin-widget" data-type="fundraiser" data-id="e51yzw" data-theme="dark" ></div>
Make It a Button
By default, the widget will appear as a panel. To transform it into a small button, we add the
data-size="button" attribute.
When using a button, we must also specify the button text with the
data-button_text="some text" attribute.
<div class="tallycoin-widget" data-type="fundraiser" data-id="e51yzw" data-size="button" data-button_text="some text" ></div>
Make It an Image
If you want to use your own image, we add the
data-image="{your image location}" attribute.
<div class="tallycoin-widget" data-type="fundraiser" data-id="e51yzw" data-image="https://tallyco.in/img/logo/tallycoin-logo-color-url-with-bg.jpg" ></div>
Panel Border
By default, the panel has a border with rounded edges and a light shadow.
We can specify the border class by adding the
data-border_class="yourclass" attribute.
To remove the border entirely, we can set
data-border_class="none"
<div class="tallycoin-widget" data-type="fundraiser" data-id="e51yzw" data-border_class="yourclass" ></div>
Tallying
