Buttons
Always display the generic Smartum button before as the call to action that redirects a user to a Smartum service (e.g., Smartum Checkout).
Button Styles
The Smartum button is customizable so that you can match the look and feel of your application or website.
The button is customizable through URL query string parameters. The base URL for the button is https://badges.smartum.fi/button/{variant}.svg.
Variants
The button comes in three color variants: Smartum's brand color, black, and white. We recommend using the brand color, as it is the most easily identifiable.
| Variant | Button |
|---|---|
| color |  |
| black |  |
| white |  |
The example URL is for the brand color variant is https://badges.smartum.fi/button/color.svg.
Sizes
You can choose the size of the button, with the following restrictions:
- Minimum width is 120.
- Minimum height is 30.
- The minimum ratio between width and height is 4 (
width ÷ height ≥ 4).
To specify the size, use the width and height query string parameters.
| Parameters | Button |
|---|---|
width=120&height=30 | |
width=160&height=30 |  |
width=200&height=50 |  |
width=240&height=50 |  |
The example URL for a size of 240x50 is https://badges.smartum.fi/button/color.svg?width=240&height=50.
Corner Radius
If you want a button with rounded corners, you can set the corner radius using the radius query string parameter in the same unit as the size, as long as the value does not exceed half of the height (e.g. for a button height of 50, the corner radius must not exceed 25).
The default corner radius is 0.
| Parameter | Button |
|---|---|
radius=4 |  |
radius=15 |  |
The example URL for a corner radius of 4 is https://badges.smartum.fi/button/color.svg?radius=4.
Outline
You may also enable an outline for the button, which is a thin line around it. The outline is controlled through the outline query string parameter that can be set to t (true) or f (false).
By default, there is no outline.
| Parameter | Button |
|---|---|
outline=f |  |
outline=t |  |
The example URL for an outline is https://badges.smartum.fi/button/white.svg?outline=t.
Guidelines
- Do not host the buttons yourself, unless absolutely necessary. Instead, use our own URL when displaying the buttons. This allows us to adjust the buttons over time without requiring you to update them. We guarantee compatibility in terms of adjusted styles.
- Do not modify the buttons in any way, other than the ones allowed by the URL parameters.
- When showing the Smartum button alongside other buttons, make sure the Smartum button is at least the same size as the others, to be as prominent.
- Take advantage of the styling options available to you, and adjust the Smartum button to match the appearance of other visual elements.