Note:
AI powered style editor for tooltip creation is a Beta feature. If you need to enable the feature, you must first enable the CSS customization (also Beta) feature for tooltips. Contact support@whatfix.com to enable both the features for your account. For more information on how to use CSS for tooltips, see Use CSS for tooltip customization.
AI-powered style editor simplifies tooltip styling by enabling you to generate designs through prompts instead of manually editing CSS. Create, preview, and refine tooltip styles to better match the experiences you want to deliver for your users, in lesser time.
The feature can be accessed on both Whatfix Studio and Dashboard and is available for Flows, Smart tips, and Beacons.
Info:
While using the AI powered style editor, you have the option to switch to the CSS code editor while creating tooltips.
For Content and Widgets that are already in the published stage, ensure you Publish the changes to reflect.
Whatfix enables Account Managers and Content Managers to create customized AI powered tooltips. For more information on user roles, see Whatfix user roles.
Sample prompts
Enter a prompt in plain English to describe the style change you want. Whatfix automatically applies it to the tooltip.
Use the following example prompts:
“Change the tooltip background color to green.”
“Increase the shadow effect on the tooltip.”
“Change the background color of the buttons to navy blue.”
“Reduce the tooltip width to 300 pixels.”
Write one style change per prompt for the most reliable result.
Info:
Whatfix does not use your prompt inputs or generated Flow content to train AI models. For more information, see Data Security and Privacy Policies for Whatfix AI features.
Capabilities
The AI style editor helps you:
Create brand-compliant tooltips without writing CSS.
Generate CSS from a prompt written in plain English.
Customize tooltips for Flows, Smart Tips, and Beacons.
Switch between the AI style editor and the CSS code editor at any point.
Limitations
The AI style editor is AI-generated and the output might occasionally contain inaccuracies.
Review the CSS the AI style editor generates before you save it or publish it to Production.
Expand the following accordions to learn how to use the AI Style editor:
Use the AI style editor for tooltip customization on Whatfix Dashboard
On the Whatfix Guidance Dashboard, click Style.
Click Templates.
Click Default.
Go to the tooltip that you want to copy and customize, and then click the Copy template icon.
Go to the Customized section to view the copied template.
On the copied template, click the Edit template icon.
Click CSS to open the AI style editor.
Here’s the Dashboard view of the AI powered style editor:
Enter prompts based on your use cases and click Submit for the changes to reflect.
For instance, if you want the Flow tooltip background color to change from dark blue to green, enter a prompt - Please change the tooltip background color to green. The prompt shown is just for representation, and it would change based on your use cases and requirements.
Click Save.
Use the AI style editor for tooltip customization on Whatfix Studio
Go to the default template on Studio and click Change.
Choose a template of your choice from the custom templates that you have created on the Dashboard.
Click CSS to open the AI style editor.
Here’s the Studio view of the AI powered style editor:
Enter prompts based on your use cases and click Submit for the changes to reflect.
For instance, if you want to add a border around the Next button, enter a prompt - Add a border around the Next button. Or, if you want the tooltip background color to change from red to blue, enter a prompt - Make the tooltip background color blue. The prompts shown are just for representation, and these prompts would change based on your use cases and requirements.
Click Save Step.
Note:
Examples of other tooltip customizations done with the help of the AI style editor:
Change the tooltip width.
Change the background color of the buttons.
Increase or decrease the shadow effect on the tooltip.
Contact support@whatfix.com for help with tooltip customizations on the Studio using the AI style editor.