Magento 2 Retail Store Appointment

1. Retail Store Appointment for Magento 2 User Guide 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 Retail Store Appointment for Magento2 © Meetanshi

2. 1.Extension Installation •For Magento Marketplace Customers oCreate a folder structure in Magento root as app/code/Meetanshi/CustomerAppointment oDownload and extract the zip folder and upload our extension files to the app/code/Meetanshi/CustomerAppointment via FTP. oLogin 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 oExtract the zip folder and upload our extension to the root of your Magento 2 directory via FTP. oLogin 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 2.Configuration To configure the extension, login to Magento 2 backend, move to Stores → 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. → Configuration → → Retail Store Appointment for Magento2 © Meetanshi

3. 3.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. Retail Store Appointment for Magento2 © Meetanshi

4. 4.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. 5.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 oGo to Google API Console. oCreate a project by clicking "Select a project" (at the top). oClick on the NEW PROJECT button. Retail Store Appointment for Magento2 © Meetanshi

5. oOn the next screen, enter your project name and click on create button. oAfter the project is created, click on APIs and Services from the left panel and select Dashboard from its sub-options. Retail Store Appointment for Magento2 © Meetanshi

6. oFrom the Dashboard, click on ENABLE APIS AND SERVICES. oNow search for Google Calendar API in the search box and click when displayed. oClick on the ENABLE button to enable the Google Calendar API. Retail Store Appointment for Magento2 © Meetanshi

7. oNow configure the APIs and Services of Google Calendar API by clicking CREATE CREDENTIALS option and selecting the OAuth client ID option. oOn the next screen, select the web application option under Application type. oNow, Select External user type from the OAuth consent screen and click on CREATE. Retail Store Appointment for Magento2 © Meetanshi

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

9. oIn the second step of the OAuth consent screen, click on SAVE AND CONTINUE button to redirect to the next step. oIn 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. Retail Store Appointment for Magento2 © Meetanshi

10. oThe next screen is Summary page, check whether all entered information is correct or not. oFrom the Publishing status section, click on PUBLISH APP. Retail Store Appointment for Magento2 © Meetanshi

11. oIt displays a dialog box that asks for your confirmation for publishing, Click on CONFIRM. oNow, click the credentials tab from the side panel, select the Application type as Web application. oEnter the name of your OAuth client. oIn the Authorized Redirect URLs option, enter the same redirect URL as you entered under the Redirect URL option in the extension configuration. oClick on CREATE. Retail Store Appointment for Magento2 © Meetanshi

12. oIt displays a dialog box of OAuth client created. oCopy the Client ID and Client Secret from here and paste in the Client ID and Client Secret options of extension configuration. oClick on OK. Save the extension configuration. •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/4242088282c695d7c7ff7e 00d3742a899efe63b2b061f415d5344e7938dc08f0/ to get the Client token.Grant permission by clicking on ALLOW. Retail Store Appointment for Magento2 © Meetanshi

13. oOnce 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. Retail Store Appointment for Magento2 © Meetanshi

14. 6.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. 7.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 theGoogle 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. oSimplyvisit https://www.google.com/recaptcha/admin/ Retail Store Appointment for Magento2 © Meetanshi

15. oClick “+” 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. Retail Store Appointment for Magento2 © Meetanshi

16. 8.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. 9.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. Retail Store Appointment for Magento2 © Meetanshi

17. 10.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. 11.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. 12.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. Retail Store Appointment for Magento2 © Meetanshi

18. 13.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. Retail Store Appointment for Magento2 © Meetanshi