Magento 2 Retail Store Appointment

Home > Magento Extension User Guides > 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
  1. Configuration
  1. New Appointment Booking Admin Email Notification Settings
  1. Booking Confirmation Email Notification to Customers Settings
  1. Google Calendar API Settings
  1. Google Event Settings
  1. Microsoft Outlook Calendar API Settings
  1. Microsoft Event Settings
  1. Google reCAPTCHA Settings
  1. Retail Store Appointment in Frontend
  1. Admin Email on Appointment Form Submission
  1. Manage Retail Store Appointments

 
  1. Appointment Confirmation Email Notification to Customers
  1. Unconfirmed Appointment Email Notification to Customers
  1. Auto-Updated Confirmed Appointments in Google Calendar
  1. Auto-Updated Confirmed Appointments in Outlook Calendar

 

 

  1. Extension Installation
  • For Magento Marketplace Customers
    • Find the Composer name and version of the extension in the extension’s composer.json file.
    • Login to your SSH and run:
      • composer require meetanshi/magento-2-retail-store-appointment --ignore-platform-reqs
    • Enter your authentication keys. Your public key is your username; your private key is your password.
    • Wait for Composer to finish updating your project dependencies and make sure there aren’t any errors.
    • To verify that the extension installed properly, run the command:
      • php bin/magento module:status Meetanshi_CustomerAppointment --ignore-platform-reqs
          • By default, the extension is probably disabled.
          • Enable the extension and clear static view files:
      • php bin/magento module:enable Meetanshi_CustomerAppointment --clear-static-content
      • 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. 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.

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.

 

  • Under “Create OAuth client ID”, click on “Configure Consent Screen” button.

  • 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.

 

  • Redirect URL: Create and enter the redirect URL of your store as {{store_url}}/appointment/customer/getcode
  • Client Token: Enter the client token you received while registration with the Google calendar API.

After finishing the step, click {YourAdminURL}/customerappointment/index/googlecallback/key/4242088282c695d7c7ff7e00d3742a899efe63b2b061f415d5344e7938dc08f0/ to get the Client token. Grant permission by clicking on ALLOW.

 

    • 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. Microsoft Calendar API Settings
    You can integrate Microsoft Outlook Calendar API with the extension to automate booking event creation in Google Calendar when a user's booking appointment is confirmed. Configure the settings below to integrate Outlook Calendar API with the extension.
  • Microsoft Calendar API: Enable the Microsoft calendar API from here.
  • Client ID: Enter the client ID you received while registration with the Outlook calendar API.
  • Client Secret: Enter the client secret you received while registration with the Outlook calendar API.

In order to get the client ID and client secret,

  • Create Microsoft Developer account, Setup User Access permission, Setup user Account.
  • Go to Azure Portal and login with your developer account.
  • From the dashboard, jump to “Azure services” and click on “App Registrations”

 

  • Click “+New Registration”.

  • Enter calendar application name and select supported account types.

  • Select “Web” option from the dropdown, set redirect URL and click “Register” button.

  • Now, move to “API Permissions” and click on “Add a Permission”. Click on “Microsoft Graph” from the dialog.

  • Click on “Delegated Permissions” under “Microsoft Graph”. Under the “OpenId permissions”, select “offline_access” permission.

  • Scroll down to “Calendars” and select “calendars.ReadWrite” permission

  • Move to “Certificates & secrets”, click on “Client secrets” tab and click on “New Client Secret”. Click “add” button to generate secret ID and its value.

  • Move to “Certificates & secrets”, click on “Client secrets” tab and click on “New Client Secret”. Click “add” button to generate secret ID and its value. Copy the value of secret ID and paste it in the relevant Magento 2 extension configuration field.

  • Redirect URL: Create and enter the redirect URL of your store as {{store_url}}/appointment/customer/getcode

After configuring the above settings, click on “Save Configuration” and click https://meetanshi.in/m2d18/index.php/admin/customerappointment/index/googlecallback/key/15778a4fc69b9a5e804f0df55a30aa9ba40d2d14e7779825dfdf835228588d66/ to get the client token.

 

  • Client Token Key: Copy the client token and paste here.

  1. Microsoft Event Settings

If you have enabled Microsoft Calendar API, you can add event description to set it after the calendar event is created after confirmed appointment bookings.

  • Add Event Description: Enter the description for Microsoft Outlook calendar 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.

    • 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.

 

 

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

 

 

Updated:

Other Articles

and 228 more ...