The below snippet code to be added to your web-page /website, you will be able to customize with some of the below options:

Please your snippet code right before the closing body tag

• possible position  values:
  // 1 – “inline” – where the snippet is placed (for example, if this snippet is inside a table-cell, the widget will appear there)
  // 2 – “center” – widget will appear at the center of the page
  // 3 – “relative:<left>:<right>:<top>:<bottom>:<selector>” – widget will be positioned relative to the specified element (selector). Ex: “relative:left::bottom::#myButton” – will position the widget such that its left aligns with #myButton’s left and its top aligns with #myButton’s bottom.

 

• // possible trigger values:
  // 1 – “pageload” – display when the page loads
  // 2 – “delay:<seconds>” – display after a delay, example: “delay:3” will show the widget 3 seconds after the page loads
  // 3 – “click:<selector>” – display with the specified element (selector) is clicked. Ex: “click:#myButton” will show the widget when #myButton is clicked.

 

• // possible animation values:
  // 1 – “slidein:<left|right|top|bottom>” – Slide the widget into view from the specified side. Ex: “slidein:right” will slide the widget in from the right of the screen
  // 2 – “fadein” – Fade the widget into view

 
Please find a below example:

<!– Snippet – START –>
<script>
var ns_app_widget_config = {
organizationId: XXXX,
// desired width and height of widget
width: 381,
height: 450,
// how the widget is positioned
position: ‘center’,
// when the widget should be displayed
trigger: ‘click:button’, // pageload | delay:<seconds> | click:<selector>
// animation [will be ignored if position is “inline”]
animation: ‘slidein:bottom’ // none | slidein:<left|right|top|bottom> | fadein
}; </script>
<script src=“https://www.needstreet.com/js/widget/appointment.js”
id=”ns_app_widget_loader”></script>
<style>iframe { box-shadow: 0 0 5px #ccc; resize: both; }</style>
<!– Snippet – END –>