To install On-site messaging on WooCommerce, follow the next guidelines:
- Find the On-site messaging configuration settings and options at the bottom of the Klarna payments plugin settings.
- Go to Klarna Merchant portal > On-site messaging > Installation page to find the
data-client-id
. - Ensure you copy the
data-client-id
without quotes or whitespace. Then, paste it in the Data client ID field within the Klarna plugin. - Select the checkbox to enable the Product or Cart page placement in the Klarna plugin.
- Find the placement data keys in Merchant portal > On-site messaging > Placements. This is the Klarna messaging that will appear on your site.
- For the placement you'd like to use, copy the name of the placement. Paste it into the plugin settings for the Product placement data key field or the Cart placement data key field.
- Select a location in the On-Site messaging placement dropdown. This uses standard WooCommerce page locations.
For detailed documentation of On-site messaging for WooCommerce, see here.
Most Klarna placements that contain the messages have predefined themes (light -which is the default- and dark) and some can be customized.
If a placement accepts customization, you can see the Custom design button at the upper right side of the page in the Merchant portal.
The customization choices in the Klarna WooCommerce plugin include these options:
- Light = default
- Dark = dark
- None = custom design
Because of accessibility standards, you can not fully customize all the aspects of the placements.
In summary:
- To install On-site messaging in your WooCommerce store, you need to copy the
data-client-id
from Merchant portal and paste it into the Data client ID field within the Klarna plugin. - You have to select the placement, which is the Klarna messaging that will appear on your site. Copy the placement name from the Merchant portal and paste into the related field.
- Besides, you have to select a location for the messaging, using standard WooCommerce page locations.
- Some placements accept customization.