How to setup your Steer scheduler
      Back to home
      1. Knowledge Center
      2. Appointments
      3. How to setup your Steer scheduler

      Getting Started with Steer's Scheduler: How to add online scheduling to your website.

      Steer’s scheduler allows your customers to book appointments from your website. You'll need an active Steer account to use this feature.

      Looking to change availability settings? See Shop Settings > Calendar. More info here.

      Looking to customize the color, style, content, or steps that show on the scheduler? See Shop Settings > Widgets > Scheduler. More info here. 

      1. Choose if you want the scheduler to pop-up on the page or be embedded on the page. 

      For most use cases you'll want a button on the page that says "Book Appointment" (or "Request Appointment" that brings up Steer's scheduler in a pop-up. In other cases you may want to have a whole page dedicated to scheduling that hosts an embedded widget. You can have both on two different pages but not on the same page. 

      2. Add the Steer code to your website

      First, you’ll need to add a small piece of code to your website.

      • You or your website manager will need to place script inside the "head" section (<head></head>) of your website's code. You can access this through your website dashboard or ask a developer to do so.
      • If your website is on a platform like WIX or Shopify, look for a place in your admin panel where you can add custom JavaScript and paste it there.

        • Wix requires you to specify where the widget script goes. You must insert <body> tags before and after the Steer widget script as shown below. More information from Wix can be found here.

          <body>code from Steer<body>

      Where to find the code:

      1. Go to Settings.
      2. Click Widgets, then Scheduler.
      3. Copy the code from the Page Embedded Widget or the Pop-Up View Widget section based on how your want the widget to show on your website. 


      We also offer a version of the widget that starts with a map where the customer can choose which of your locations they want to book for. Where to find the multi location version with map:

      1. Go to All Locations
      2. Click Settings, then Widget.
      3. Click Widgets, then Scheduler.
      4. Copy the code from the Page Embedded Widget or the Pop-Up View Widget section based on how your want the widget to show on your website. 

      3. Create an appointment button (Only for pop-up version)

      You must add a button to your website on the page you want the pop-up widget.

      Reach out to your developer if your website was custom-built, or you can find the ability to add a button in your website admin panel if you are using any CMS or website builder.

      Note: if you already use an Steer's embedded scheduler on that page, it cannot co-exist on the same page as Steer's pop-up scheduler. 

      4.  Activate the appointment button (Only for pop-up version)

      Once the button is where you want it, you’ll need to link it to the code from before to activate it.

      This is done by adding a small command that tells the button "Hey, show the form now!", whenever it’s clicked on.

      Here's a simple example of the code for that request:

      ```html

      <button onClick="window.Steer.show()">Request an appointment</button>

      ```


      Once that’s done, your button should be fully functional!

      5. Customize how your pop-up works (Only for pop-up version)

      We have a couple of options to make the form appear just how you want:

      • Close on Escape Key: This lets your customers close the form by pressing the "ESC" key. It's set to do this by default. The setting in the script is called close-on-esc="true". To change it, just change the final word to either "true" or "false" depending on your preference. In code, "true" or "false" basically means On or Off.
      • Close by Clicking Outside: If this feature is turned on, your customers can close the appointment pop-up on your website by clicking anywhere outside of the pop-up box. If this feature is turned off, they’ll need to click on the X button to close the form. The feature is turned off by default. You can turn it on by adjusting the code close-on-outside-click=, to either "true" or "false"

      Steer modal available commands:
      onClick="window.Steer.show() // show request appointment modal
      onClick="window.Steer.hide() // hide request appointment modal


      Here's how you can adjust these settings in the code:

      <script

      close-on-esc="true"

      close-on-outside-click="false"

      src="https://widget.app.dev2.steercrm.dev/modal-widget-bundle.js"

      defer=""

      id="mechanic-advisor-modal-v1"

      token="widgetToken"

      clusterid="clusterId">

      </script>

      Using a website builder?

      If you're using a site builder like WIX or Shopify, just copy the Steer code into the place for custom JavaScript. Then, create your button using the builder's tools and link it to the script using their custom HTML feature.


      All done! You just made it so much easier for customers to book an appointment with your shop. If you have any questions or need a little help, don't hesitate to reach out to our support team here.

      Want to track Steer's Scheduler with Google Analytics or Google Adwords?

      See instructions here.