Skip to main content

On-site messaging

On-site messaging contains badges in different variants that can be used to let your customers know that a payment is accepted.

To use the badge on your site, add our On-Site Messaging JavaScript library. The library should preferably be added between your page's <head>...</head>-tags and only once per page:

<script async type="text/javascript" src="https://checkout.vipps.no/on-site-messaging/v1/vipps-osm.js"></script>

If you don't have access to edit your websites code directly, you can place the JavaScript library just before the chosen badge.

Badge

The On-Site Messaging library contains an easy-to-integrate badge with a tailor-made message for use in your online store. The badge comes in five variants with different color pallets to suite your website.

Example badge

You can find a demo and examples of all the variants on the On-Site Messaging Demo site.

Badge

<vipps-badge variant="gray"></vipps-badge>

Attributes

All attributes are optional.

AttributeDescriptionDefault
variantThe color variant of the badge. Supported values: white, orange, gray, light-orange, purple.white
languageISO 639-1 alpha-2 language code. Supported values: en, no.no
amountThe payable amount in NOK. Amounts are specified in minor units. For Norwegian kroner (NOK) that means 1 kr = 100 øre. Example: 499 kr = 49900 øre.

Customization

You can customize the placement and size of the badge by either applying your own CSS-style with the class or style attribute.

If the badge is too small or too large to fit your content, you can override the font-size to scale it as follows:

<vipps-badge vipps-senere variant="purple" style="font-size: 1.5rem;"></vipps-badge>

This will scale the badge to 1.5x the size of the root font size. You can also use px or em values to scale the badge.

The badge is an inline element by default, which means it will stay on the same line as sibling elements.

To get the badge on the next line, you can set display: block on the element to prevent it from being inline:

<vipps-badge vipps-senere amount="100000" variant="purple" style="display: block;"></vipps-badge>

To make the badge fill the parent container, set width: 100%:

<vipps-badge vipps-senere amount="100000" variant="purple" style="width: 100%;"></vipps-badge>

To align the badge, you can set text-align on the parent container:

<div style="text-align: center;">
<vipps-badge vipps-senere amount="100000" variant="purple"></vipps-badge>
</div>

Integrations

Here is how to integrate the badge to your products in some of the most used e-commerce platforms. If you need a more advanced set-up or placement, please consult your e-commerce platform documentation.

WooCommerce

To add the badge to your product in WooCommerce, click to edit the product where you want to display the badge.

Under either Product description or Product short description, click the Text tab (next to Visual) which is usually in the top-right corner of the text area.

Next, just add the JavaScript library and the code snippet for the badge:

<script async type="text/javascript" src="https://checkout.vipps.no/on-site-messaging/v1/vipps-osm.js"></script>
<vipps-badge variant="purple"></vipps-badge>

WooCommerce integration

Magento

To add the badge to your product in Magento, find your product in Magento Admin > Catalog > Products and open it for edit. Go to Content > Short Description, hide the editor, and then paste in the following:

<script async type="text/javascript" src="https://checkout.vipps.no/on-site-messaging/v1/vipps-osm.js"></script>
<vipps-badge variant="purple"></vipps-badge>

Magento integration

Shopify

To add the badge to your product in Shopify, find your product in Shopify Admin > Products and open it. Press the Show HTML button and paste in the following:

<script async type="text/javascript" src="https://checkout.vipps.no/on-site-messaging/v1/vipps-osm.js"></script>
<vipps-badge variant="purple"></vipps-badge>

Shopify integration

Help us improve our documentation

Did you find what you were looking for?