This article covers the two steps that are the same for every setup: adding the Contribe plugin to your site, and styling it to match your design. It applies whether you are using our WooCommerce plugin or a fully custom webshop.
1. Add the plugin to your webshop
Insert the script below into the section of your site where you want the plugin to appear:
<style>
contribe-plugin {
display: block;
--contribe-container-background: inherit;
--contribe-font-large: 12px;
--contribe-font-small: 10px;
--contribe-project-background: #f5f5f5;
--contribe-project-active-background: #000000;
--contribe-project-description-background: #000000;
--contribe-project-icon-size: 24px;
--contribe-project-icon-color: inherit;
--contribe-project-active-icon-color: #ffffff;
--contribe-selector-header-title: #000;
--contribe-selector-header-description: #000;
--contribe-selector-project-description-title: #ffffff;
--contribe-selector-project-description-description: #ffffff;
--contribe-container-border: none;
--contribe-container-padding: 0px;
--contribe-container-border-radius: none;
--contribe-project-padding: 2px;
--contribe-project-border-radius: 1px;
--contribe-project-description-border-radius: 1px;
--contribe-project-border: 1px solid #000000;
--contribe-project-description-border: 1px solid #000000;
--contribe-project-description-padding: 5px;
}
</style>
<!-- add the script somewhere next to your other scripts -->
<script>
const scriptTag = document.createElement("script");
scriptTag.type = "module";
scriptTag.src = "https://plugins.contribe.io/cdn/v1/plugin.mjs";
document.head.appendChild(scriptTag);
</script>
<!-- add this to your HTML where you would like the widget to appear -->
<contribe-plugin
pluginId="XXXXXXXX"
locale="inherit"
logo="true"
/>
NB: Remember to replace the "XXXXXXXX" in the pluginId with your own. If you are on Shopify this is simply your .myshopify.com domain, so there is nothing to look up — see Where do I find my Plugin ID? for the details.
If you have not received your Plugin ID from Contribe, or are not sure how to get started, do not worry — Contribe Support is here to help.
2. Style the plugin to match your design preferences
Styling is done by changing the values within each CSS variable in the script above.
Here you can change:
Font type, size and color
Colors within the plugin
Borders and border radius
Margins and padding
Looking for more comprehensive guidance on design and styling?
Head to the article CSS variables and styling, where we have lined up all the default values within each variable and a more comprehensive guide on custom styling.
3. Track carts and completed orders (custom webshops only)
If you are using our WooCommerce plugin, order data is synced automatically using the Secret Key, and you can skip this step.
A custom webshop has no plugin syncing order data, so you need to pass cart context to the plugin and tell Contribe when a cart has been completed.
Head to Custom Cart Completion for the full guide to cart attributes, the contribe-cart-update event, and the cart completion endpoint.
Need help? Contact Contribe Support
To get assistance, simply click the chat icon in the bottom right corner of this page to chat with our support team. They will guide you through the setup process and answer any questions you may have.