In general, the widget preview tool is a good estimation of what your widget will look like on your website, but it's not always precise. Why is that?
Widgets Use CSS
Widget customizations are based on CSS (stands for cascading stylesheets), or styles that are applied to a website to change its appearance. This includes fonts, colors, borders, etc.
Widgets Inherit CSS From Your Website
When you embed our widget on your site, there is a chance that the widget will "inherit" CSS styles from your website and apply them to similar elements within the widget. Therefore, the fonts, font size, colors, styles, and sometimes even position of certain widget elements may not appear the same as it does in the widget preview. This is to be expected. Since our widget preview does not include the same CSS styles as your website, the widget when viewed in the preview does not inherit those styles.
The widget preview is used mostly to test the customizations that you make within the HealCode manager to make sure that they appear correct. Additional tweaking may need to be done once the widget is deployed to your website.
We recommend choosing all of the options that you would like for a widget and making sure that the information that you expect your customers to see is displayed via the preview, then install the widget to your website and make the look and feel customizations after that. Then you can see what the widget actually looks like and which CSS properties are inherited from your website. You might like the defaults and not need to make any tweaks at all.
Of course if you need help making adjustments to our site, just open a new Help Ticket and ask us.