With ProductMix you can create an embeddable widget to show Announcements, Roadmap, and Ideas.
It is possible to create a single widget for every product.
Steps to create a widget, customize it, and place it on the website can be found below.
Steps to create a Widget #
There are 2 ways to create a widget.
Create a widget by using the Create button.
From your ProductMix Dashboard click Create button and choose Create widget from the list.
Set title for the widget, select the tabs to be shown inside the widget (if needed, edit the tab labels) and click Create.
Create a widget from the Product settings.
From your ProductMix Dashboard open the Settings tab and click Product settings. Choose Widget from the list and click Create widget button.
Set the title for the widget, select the tabs to be shown inside the widget (if needed, edit the tab labels) to create the widget.
Steps to customize the widget #
Once created, the widget can be customized from the Widget setup and Widget configuration sections.
Widget setup #
It is possible to edit the Widget name and choose the Launching type (Link or Button).
From the Customization subsection set the Primary and Secondary colors, Button text and background colors.
From the Button customization subsection choose the Icon, Size, Position and Color of the button, along with the Unread notifications color.
Also Remove branding or else enable the Custom branding by adding the Watermark and Brand URL.
Widget configuration #
The following options can be set in the Widget Configuration section:
Tabs: to choose the tabs (Announcements, Roadmap or Ideas) which will be shown in the widget along with the text and border colors as well as active text and active border colors.
Header title: to set a header title along with the background and text colors.
Footer: to set the footer background and text colors.
Widget size
Widget background color tone
Overlay option: to open the widget with the overlay by choosing the color and opacity for it.
Close button: to choose the position for the button with the appropriate icon.
Animation: to choose Opening and Closing animations for the widget with the relevant duration.
Cookie consent screen
Page scrolling: to enable or disable page scrolling while the widget is opened.
Once the widget is customized, you are free to put it on your website by copying the embed code.
Embedding and Triggering the Widget #
Once the widget is customized, you need to embed it on your website to activate it.
Adding the Widget to Your Website #
Copy the embed code from the ProductMix Account Settings > System Settings > Embed Code
After copying it you need to insert that code in your site header.
For WordPress Users #
If you are using WordPress, we recommend using the Header Footer Code Manager plugin to insert the embed code into your site. This ensures the widget is loaded on all pages efficiently.
Triggering the Widget #
After embedding the widget, you can trigger it using different methods:
Using a Link or Button #
To trigger the widget by clicking a link or button, use the following format:
<a href="#SGBF-open-6400562940efc20670056e00">Click me</a>If you want to trigger the widget when clicking a button, use:
<button onclick="location.href='#SGBF-open-6400562940efc20670056e00'">Open Widget</button>That’s it! Now your widget is fully set up and ready to be used on your website.
If you want to redirect the users to your portal to leave an idea request once the content of the widget is clicked, please, ensure to create a portal beforehand as explained here.
That’s it! Those were the options to manage a widget on ProductMix.