Magento 2 Retail Store Appointment

Magento 2 Retail Store Appointment extension allows customers to schedule an appointment to visit your retail store from your Magento 2 webs store.

 

Table of Content

  1. Extension Installation Guide
  2. Configuration
  3. New Appointment Booking Admin Email Notification Settings
  4. Booking Confirmation Email Notification to Customers Settings
  5. Google Calendar API Settings
  6. Google Event Settings
  7. Google reCAPTCHA Settings
  8. Retail Store Appointment in Frontend
  9. Admin Email on Appointment Form Submission
  10. Manage Retail Store Appointments
  11. Appointment Confirmation Email Notification to Customers
  12. Unconfirmed Appointment Email Notification to Customers
  13. Auto-Updated Confirmed Appointments in Google Calendar

 

  1. Extension Installation
  • For Magento Marketplace Customers
  • Create a folder structure in Magento root as app/code/Meetanshi/CustomerAppointment
  • Download and extract the zip folder and upload our extension files to the app/code/Meetanshi/CustomerAppointment via FTP.
    • Login to your SSH and run below commands step by step:
      • php bin/magento setup:upgrade
      • For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
      • For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy –f
      • php bin/magento cache:flush

 

  • For Meetanshi Customers
    • Extract the zip folder and upload our extension to the root of your Magento 2 directory via FTP.
    • Login to your SSH and run below commands step by step:
      • php bin/magento setup:upgrade
      • For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
      • For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy –f
      • php bin/magento cache:flush

 

  1. Configuration
    To configure the extension, login to Magento 2 backend, move to Stores à Configuration à Meetanshi à Retail Store Appointment, where you can find various settings to configure the extension.
  • Retail Store Appointment: Enable or disable the extension from here.
  • Appointment Booking Start Time: Enter the start time of appointment booking.
  • Appointment Booking End Time: Enter the end time of appointment booking.
  • Appointment Duration: Enter the duration of the appointment in minutes.
  • Number of Appointments to be allowed at a Time: Enter the number of appointments to allow for booking at the same time.
  • Allowed Appointment Days of the Week: Select the days of the week when an appointment is allowed.

 

  1. New Appointment Booking Admin Email Notification Settings
    The extension facilitates to send an Email notification to the admin whenever a user submits a new appointment booking form from the frontend. Configure the below settings for the same.
  • Send New Appointment Booking Email Notifications to Admin: Select YES to send Email notification to the admin when a user books a new appointment through the frontend form.
  • Email ID: Enter the Email ID of an admin to get Email notification when a user submits a new appointment.
  • Email Sender: Select the Email sender from the dropdown.
  • Email Template: Select the template for the new appointment booking Email.

 

  1. Booking Confirmation Email Notification to Customers Settings
    The extension facilitates sending the booking confirmation or decline Email notifications to the customers. Configure the below settings for the same.
  • Send Booking Confirmation/Decline Notification to Customers: Select YES to send the booking confirmation or decline Email notifications to the customers.
  • Auto Confirm Appointment: Set YES to confirm all the users’ appointments automatically.
  • Email Sender: Select the email sender from the dropdown.
  • Email Template for Confirmed Appointments: Select the Email template for confirmed appointments.
  • Email Template for Unconfirmed Appointments: Select the Email template for unconfirmed or declined appointments.

 

  1. Google Calendar API Settings
    You can integrate Google Calendar API with the extension to automate booking event creation in Google Calendar when a user's booking appointment is confirmed. The same work vice versa. Configure the settings below to integrate Google Calendar API with the extension.
  • Google Calendar API: Enable the Google calendar API from here.
  • Client ID: Enter the client ID you received while registration with the Google calendar API.
  • Client Secret: Enter the client secret you received while registration with the Google calendar API.
  • Redirect URL: Create and enter the redirect URL of your store as {{store_url}}/appointment/customer/getcode

In order to get the client ID and client secret

  • Go to Google API Console.
  • Create a project by clicking "Select a project" (at the top).
  • Click on the NEW PROJECT button.

 

  • On the next screen, enter your project name and click on create button.

 

  • After the project is created, click on APIs and Services from the left panel and select Dashboard from its sub-options.

 

  • From the Dashboard, click on ENABLE APIS AND SERVICES.

 

  • Now search for Google Calendar API in the search box and click when displayed.


 

  • Click on the ENABLE button to enable the Google Calendar API.

  • Now configure the APIs and Services of Google Calendar API by clicking CREATE CREDENTIALS option and selecting the OAuth client ID option.

 

  • On the next screen, select the web application option under Application type.

 

  • Now, Select External user type from the OAuth consent screen and click on CREATE.

 

  • Enter the app information like your app name, user support Email, app/website logo under the App Information section.
  • Under the App domain section, enter the homepage URL of your webstore.
  • Enter the public privacy policy link in the Application privacy policy link field.
  • Enter an authorized domain in the next option.
  • Enter an authentic Email address under Developer Contact Information section for Google to notify you about any changes on your project. Click “Save and Continue”.

  • In the second step of the OAuth consent screen, click on SAVE AND CONTINUE button to redirect to the next step.

 

  • In the next Test Users step, add test user if you want to set limited access for only test users or else directly click on SAVE AND CONTINUE.

  • The next screen is Summary page, check whether all entered information is correct or not.

 

  • From the Publishing status section, click on PUBLISH APP.

 

  • It displays a dialog box that asks for your confirmation for publishing, Click on CONFIRM.

 

  • Now, click the credentials tab from the side panel, select the Application type as Web application.
  • Enter the name of your OAuth client.
  • In the Authorized Redirect URLs option, enter the same redirect URL as you entered under the Redirect URL option in the extension configuration.
  • Click on CREATE.

 

  • It displays a dialog box of OAuth client created.
  • Copy the Client ID and Client Secret from here and paste in the Client ID and Client Secret options of extension configuration.
  •  Click on OK. Save the extension configuration.

 

 

    • Once the permission is allowed, it automatically redirects to the redirect URL and generates client token. Copy that client token and paste it in the extension configuration.

Note: You have to follow all the steps same as mentioned in the extension configuration note under the Google Calendar API Settings to get the Client ID, Client Secret and Client Token.

 

 

  1. Google Event Settings
    If you have enabled Google Calendar API, you can add event summary and description to set them after the calendar event is created after confirmed appointment bookings.
  • Add Event Summary: Enter the summary for Google event.
  • Add Event Description: Enter the description for Google event.

 

  1. Google reCAPTCHA Settings
    The extension facilitates enabling Google reCAPTCHA v3 on booking appointment form in the frontend to avoid spam appointment form submissions. To enable the Google reCAPTCHA v3 on the appointment booking form, configure the settings below.

 

  • Google reCAPTCHA: Enable the Google reCAPTCHA v3.
  • Site Key: Enter the site key obtained while registration with Google reCAPTCHA.
  • Secret key: Enter the secret key obtained while registration with Google reCAPTCHA.

 

 

    • Click “+” to add new site, select “reCAPTCHA v3”, add domain, accept the terms and click Submit to get the site key and secret key.

 

Enter the site key and secret key in the extension configuration.

 

  1. Retail Store Appointment in Frontend
    Once the extension is configured, you can find the retail store appointment form link in the top link section of the frontend. Click on the form link, enter your personal details, select the appointment date, select the time of the store visit and submit the form to send for the approval. You can see Google reCAPTCHA v3 badge in the frontend which restricts spam form submissions.

 

  1. Admin Email Notification on Appointment Form Submission
    Immediately after a user submits the appointment booking form, if you have set YES to Send New Appointment Booking Email Notifications to Admin, the admin gets an Email having the details of users and the preferred date and time of the appointment booking.

 

  1. Manage Retail Store Appointments
    Details of all the submitted appointment forms get listed in the backend under Customers > Customers > Manage Retails Store Appointments grid. Admin can manage, confirm or decline each appointment from this grid. He can also use the mass action to change the status of the appointment or delete them by selecting multiple appointments at a time.

 

  1. Appointment Confirmation Email Notification to Customers
    If the admin confirms the appointment from the Manage Retail Store Appointments grid, the customers get appointment confirmation email.

 

  1. Unconfirmed Appointment Email Notification to Customers
    If the admin declines the appointment from the Manage Retail Store Appointments grid, the customers get appointment un-confirmation email.

 

  1. Auto-Updated Confirmed Appointments in Google Calendar
    If you have enabled the Google Calendar API, all the confirmed appointments get auto updated in the Google calendar with the event details. The admin can see all the booked appointments in his Google calendar app.

 

​​​​​​​