Skip to main content

Customize the Website Widget Using the Developer API

Clayton Locher
Updated

This article is intended for web developers to learn more about our installation options and developer API for more control over the behavior and appearance of the Website Widget. For a high-level walkthrough of the installation process starting in Otto Flow, please check out Add the Website Widget to Your Website.

Install

Floating (default)

This default option allows you to display the widget "floating" above all other content on the page in the lower right corner (by default) of the page.

Screenshot 2024-06-05 at 3.18.09 PM.png

  1. Copy the Website Widget script from the Website Widget Settings page in Otto Flow.
  2. Paste the script just before the </body> tag on all pages where you'd like the widget to display.

Inline

This option allows you to embed the widget "inline" in a containing element of your choosing.

Screenshot 2024-06-05 at 3.19.01 PM.png

  1. Copy the Website Widget script from the Website Settings page in Otto Flow.
  2. Paste the script just before the </body> tag on all pages where you'd like the widget to display.
  3. In the location of your choice on each page where you'd like the widget to display, add an HTML element with an id attribute of otto-widget-iframe-container (e.g., <div id="otto-widget-iframe-container"></div>). The widget will be displayed within this element and take up its full width and height, so feel free to add style rules to alter the dimensions of the container element as desired.

 

Preview on the demo site

Once the Website Widget has been enabled on the Website Widget Settings page in Otto Flow, you can preview and interact with the actual Website Widget for your clinic on our demo site:

https://connect.televet.com/preview?id=clinic-id

Be sure to replace clinic-id with your clinic's actual ID, which is a 25-character string that can be found within the Website Widget script.

 

Customize and control

JavaScript API

initialize

otto.widget.initialize(clinicId: string, options?: InitializationOptions)
 
InitializationOptions
 
Property Type Is Required Default
isOpen boolean false false
showPreview boolean false true
selectRequestType WidgetRequestType false N/A
 
WidgetRequestType
See table below.
 

destroy

otto.widget.destroy()
 

open

otto.widget.open()
 

close

otto.widget.close()
 

toggle

otto.widget.toggle()
 

selectRequestType

otto.widget.selectRequestType(requestType: WidgetRequestType)
 

WidgetRequestType

Value Default Label
RequestAppointment Request an appointment
RequestRxRefill Request medication or food refill
RequestGroomingAppoinment Request grooming
RequestBoarding Request boaridng
TalkToStaff Talk to staff
RequestMedicalRecords Request medical records
RequestVirtualConsult Request a virtual consultation
DirectBooking Book an appointment
 

Query parameter commands

Place any of the following query parameters in the URL to carry out the desired action on page load:
 
Parameter Value(s) Action
ottoWidgetOpen
To open: (None), true, etc.
To not open: false, 0
 Opens the widget on page load if the value provided is not either false or 0.
ottoWidgetSelectRequestType See table above. Selects the provided request type if that type is enabled for the clinic's widget.

Note: If there are duplicate active request types, only the first one can currently be selected.
 
 

Related articles

Comments

0 comments

Please sign in to leave a comment.