How to Customize Your Widget and Button

Learn how to make your widget and button match your website and be consistent with your branding.

PART ONE - Widget

Step 1 - Go to 'Settings' from your left-hand menu and select 'Widget'

Step 2 - Open your widget so that you can see your changes happening live while you make them

Step 3 - Choose a photo to represent your practice as the widget avatar

• This is typically a picture of the doctor or doctors, but can also be a photo of the practice, a second logo or an image of your choice

Step 4 - Add your practice's logo to the corner of the widget so the branding matches that of your website 

• Note: this must be a png file, others may not load correctly

Step 5 - Color coordinate your widget with your website

• You can adjust the color using the slider, the RGB numbers or the Hex code, if you know the colors in your website design that you would like to mimic
• Change the gradient color first, as it will affect your choice of the primary color if you chose it already
• The widget button color refers to the button on the first page of the widget, not the button that the widget minimizes into

Step 6 - Edit the text on the widget pages

• The only text sections you cannot change are the patient information questions on the second page of the widget

Step 7 - Choose the positioning of the widget on your website 

• Note any other interactive pieces or buttons you may have on your webpage, and avoid having them overlap by picking the correct alignment of your widget

PART TWO - Button

Step 1 - Click on 'Button' under 'Settings' 

Step 2 - Change the color to coordinate with your website, just as you did with your widget

• If you have other buttons on your website, you may consider making this button the same color so that it matches or a wildly different color so that the widget stands out even when minimized

Step 3 - Change the text displayed on your button

• If you should choose to do this, keep in mind that the button has a finite space allotted for text, especially if it is going to be aligned on one side of the webpage as the button is smaller when positioned in the corner

Step 4 - Choose the positioning of your button

• As with the widget, take into consideration the other interactive features of your website and position your button appropriately. 
• The button can be either a tiny camera icon or a button with wording on it. The default is a button on desktop and an icon for mobile. 

Pro-Tip: To see what your button and widget look like on a live website before you integrate the code onto yours, go to 'Integration' from your left-hand menu and click on the first link with the title 'Test before you deploy'.