Welcome to vCita support

For better service, login to your account

Follow

Customizing the LiveSite Widget

Customizing the LiveSite Widget

The LiveSite Widget can be fully customized to best fit your website look and feel. 

To configure and customize your LiveSite, from your vCita dashboard, navigate to My LiveSite>Website Widgets and click on Edit under the LiveSite Widget.

editviewLS.PNG

The LiveSite Widget Editor

The LiveSite Widget Editor includes the left menu where you can control the different setting, and the right side where you can review how the configuration you set on desktop or mobile.

LiveSite Actions

LiveSite Invite

General Settings

Colors & Fonts 

LiveSite Actions

In this section, you will select your preferred Display Mode, the Actions which your clients will be able to take online, as well as enable/disable the My Account - the client portal entry option.

Your Display Mode will determine where your additional actions display; you have a choice of displaying the additional actions across the bottom of the LiveSite Invite (Inline Actions), or to display them as floating menu on the side of your website (Floating Actions)
By default, the Inline Actions display mode will be selected. livesite_actions_display.PNG

In the Choose Actions section, you have the ability to rearrange the order of the actions by dragging-and-dropping them into your preferred order.
You can also rename the title of each action to best fit your needs.
Where these actions display will be determined by your Display Mode. You will also have the ability to enable/disable the My Account option in this area.

If you disable any of the Actions, they will not display on your LiveSite Widget.

livesite_actions_choose_actions.PNG

LiveSite Invite

This section allows you to customize the Label, Title/Call to Action, Welcome Text and Main Action.

livesite_invite.PNGlivesite_invite2.jpg

The Main Action will indicate the focus of your LiveSite Widget. By default, the Schedule action will be selected. However, you can change this Main Action at any time to encourage a specific action from your clients when they visit your site.
All additional actions will be available on your widget based on your Display Mode.

main_actions.jpg

General Settings

In this section you will have the ability to manipulate the behavior of the LiveSite Widget on your website, as well as access shortcuts to other important settings in your vCita account.

General_settings.PNG

Desktop View
Select Enable to show the LiveSite Widget when a client access your website from a desktop computer, and set the number of seconds for when the widget should Automatically display (pop-up).


Mobile View
Select Enable to show the LiveSite Widget when a client access your website from a mobile device, and set the number of seconds for when the widget should Automatically display (pop-up).

Timing
Set the number of minutes for when the LiveSite Widget should pop-up again after being closed by a client.

Colors & Fonts - Basic

Select a preexisting theme from the drop-down that best fits your website. 

colors_and_fonts_theme_select.PNG

Colors & Fonts - Advanced

Once you have selected a theme, you may click the Create new theme based on current link to further customize the widget.

create_new_theme.PNG

Once selected, you will be presented with a more configurable color selection screen, and you will have the option to change the font style and size. You may also name the theme if desired.

custom_theme.PNG

Custom themes will be added to your theme drop-down, and can be used for other vCita Widgets if desired.

Editing Preview

As you make changes to your LiveSite Widget, you will see a preview on the right. You may preview for both Desktop and Mobile modes. Enter your website URL to preview on your site. You may also click here to see a preview of the widget on your website.

The Floating Actions mode is pictured below

preview_mode.png

 

Save Changes & Add to Website

Complete your preferences and click Done in the upper right-hand corner to save changes. 
done.PNG
 
After selecting done, you will be taken back to the Publish > Add to Website screen.
When you're ready to add the widget to your website, select the Add to Website option and choose your website platform from the list of options on the left. Once selected, installation instructions will display.
If your platform is not listed, select Other Websites (HTML) to get the code needed to install the widget.

 

add_to_website.PNG

 

platform_list.PNG

 

To learn more about your integration options, please visit our Website Integration forum. If you need assistance with customizing the LiveSite Widget or adding it to your website, please contact us.

 

To learn more about how to customize the LiveSite widget using CSS click here.
Was this article helpful?
10 out of 10 found this helpful
Have more questions? Submit a request

0 Comments

Article is closed for comments.