Download the Plugin contribe-woocommerce-plugin.zip
Prepare the plugin in Wordpress
Go to wordpress and click on "Add New Plugin"
Click on "Add Plugin"
Upload the zip file in the box
Once completed, click on activate plugin
Now navigate to the new "Contribe.io" section within the Wordpress UI
And enter the information provided, by the Contribe team
Plugin ID - unique identifier for the plugin
Secret Key - a unique key used to sync order information.
If you haven't received the required information from Contribe or aren't sure how to get started, don't worry — Contribe Support is here to help!
To get assistance, simply click the chat icon in the bottom right corner of this page to chat with our support team. They'll guide you through the setup process and answer any questions you may have.
Setup the plugin in Wordpress
To set up the plugin, insert the script below into the section 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 "XXXXXXX" in the
pluginIdwith the one provided by the Contribe team. For more information, refer to Stage 2 in this guide.
Style the plugin to match your design preferences
Styling is done by changing the deciding values within each CSS variable within the above script.
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.
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'll guide you through the setup process and answer any questions you may have.