Okay
  Public Ticket #2547008
How to update the booking confirmation page
Closed

Comments

  • MR NADEEM SHAREEF started the conversation

    Hi, Just installed the Amelia booking plugin and have a question.  I want to know how to customize the final page that says thank you, your booking is completed and is pending confirmation.  I have attached a screenshot of this. Please assist me to know where to update this page from?  Thanks 

  • [deleted] replied

    Hello MR NADEEM SHAREEF , 

    Thank you for your purchase. 

    There isn't a possibility of customizing that page in Amelia with its current built-in features, unfortunately. You can change the text if you want by using the translation method, some translation tools like Poedit or LocoTranslate, and you can try to replace the trophy image if you want (it needs to be the same format/size) directly in the folder at location

    wp-content/plugins/ameliabooking/public/img

    but please note that these changes will be lost when you update Amelia, so you would need to apply them after each update.

    If you want, you can redirect customers to a page that you made when they finish booking in Amelia, in this case you won't have the Amelia Thank you page at all. 

    If this is what you want this is how to do that: 

    We have some JS hooks, that are triggered depending on the view:

    window.beforeAddToCalendarLoaded()
    window.beforeBookingLoaded()
    window.beforeSearchLoaded()
    window.beforeSearchFiltered()
    window.afterSearchFiltered()
    window.beforeConfirmedBooking()
    window.beforeCatalogLoaded()
    window.afterSelectCatalogCategory(object_category)
    window.beforeCatalogCategoryLoaded(object_category)
    window.beforeCatalogServiceLoaded(object_category, object_service)
    window.afterSearchActivateService(object_appointment, object_serviceActive)
    window.afterSearchGoToSecondStep(object_appointment, object_serviceActive)
    window.afterBookingSelectDateAndTime(object_appointment, object_serviceId, object_providerId, object_locationId)
    window.afterBookingSelectService(object_appointment, object_serviceId, object_providerId, object_locationId)
    window.beforeConfirmBookingLoaded(object_appointment, object_service, object_provider, object_location)
    window.afterConfirmBooking(object_appointment, object_service, object_provider, object_location)

     

    So, you can use the hook, for example, beforeConfirmedBooking, that will be triggered when your customers confirm booking. You will of course set the redirect URL that you want in the script:

    <script>
    window.beforeConfirmedBooking = function()
    {
    window.location.href = "https://www.google.com";
    };
    </script>

    And you need to just place this script on the page where you have your Amelia shortode. We provided Google just as an example , you will provide your page there. 



  • MR NADEEM SHAREEF replied

    Thanks Marija for your reply.  What I have decided is to do a thankyou page in Elementor with our own company logo and some text etc.  

    Can you please guide me on the following as I am not sure about them.

    1. thankyou page URL is: www.abc.com.au/thankyou - I will set this up as Redirect URL, will this page automatically triggerred when someone confirms a booking?  Do I need to add any code to my elementor page?  If yes, where should I add this code thanks 

    2. I also want to add a 'add to calender' drop down as it is on the original thankyou page.  How can do this please if I am using Elementor PRO to build my page.

    Much appreciate your help on this.

    Thanks 

  • [deleted] replied

    You are welcome. 

    1. You should add this script to the page where you have Amelia shortcode, it is added as HTML format (there is such option in Elementor, like in most of the page builders)

    <script>
    window.beforeConfirmedBooking = function()
    {
    window.location.href = "https://www.google.com";
    };
    </script>

    instead of https://www.google.com you should put your page 

    http://www.abc.com.au/thankyou


    so it should look like this:

    <script>
    window.beforeConfirmedBooking = function()
    {
    window.location.href = "http://www.abc.com.au/thankyou";
    };
    </script>


    2. If you put a redirection to your own page there isn't a possibility of having the Add to calendar option, unfortunately. 


  • MR NADEEM SHAREEF replied

    Hi Marija

    I have added exactly as you mentioned.  Here is what I have done:

    1. Created a thankyou page with our own company message and then added html short code as:

    <script>
    window.beforeConfirmedBooking = function()
    {
    window.location.href = "http://www.hearingpro.com.au/thankyou/";
    };
    </script>


    2. Then Under General settings added the Redirect URL

    3. But the congratulation page still appears before the actual redirect URL - pls check this short video I made:

    https://www.loom.com/share/ed4e7307bee54f9cac461c8828dea1ce

    4. I want to replace the 'Congratulations' page and when the customer clicks on 'Confirm it should take them to the thankyou page directly.

    Kindly advise.  Thanks

  • [deleted] replied

    Hi MR NADEEM SHAREEF, 

    If you provide a redirect URL to the Amelia General settings - the customers will be taken there after they click on the Finish button on the Amelia Congratulations page. So, this option is not there to replace the Congratulations page, but to take the customers to that page after they click on Finish. 

    The Congratulations page should be replaced with your page by adding the script, maybe it isn't added properly to the page or something is missing. Please provide me a temporary WP-admin login for your site where this happens, so we could log in and take a look. We do not interfere with any data or anything else except for the plugin (in case that’s a production version of the site), and of course we do not provide login data to third party. You can write credentials here just check Private Reply so nobody can see them except us.

  •   MR NADEEM SHAREEF replied privately
  •   [deleted] replied privately
  •   MR NADEEM SHAREEF replied privately
  •   [deleted] replied privately
  •   MR NADEEM SHAREEF replied privately
  •   MR NADEEM SHAREEF replied privately
  •   MR NADEEM SHAREEF replied privately
  •   [deleted] replied privately
  •   [deleted] replied privately
  •   MR NADEEM SHAREEF replied privately
  •   [deleted] replied privately
  •   MR NADEEM SHAREEF replied privately
  •   [deleted] replied privately
  •   MR NADEEM SHAREEF replied privately
  •   [deleted] replied privately
  •  19
    ronnie replied

    I also would like to customise the final page. 


    Do you have any plans to do this in upcoming versions? 

    It would be good to have custom fields on the final page as well, such as:

    Your booking is confirmed for %date% at the following location %location%

    At the moment, a couple of clients have told me it's a little abrupt when making a booking, and then go to a completed page without confirmation where and when the booking is (despite the sms / email).

  • [deleted] replied

    Hello Ronnie, 

    We don't have plans to implement this in the upcoming versions of Amelia, unfortunately. 

    You can post this as a suggestions here https://wpamelia.cnflx.io/boards/feature-requests or vote for a similar feature request there, so it can be considered in the future. 

    For now, you can only create your own page and redirect to it using the JS hooks, in the way I explained in my previous messages. 

    If you have any other questions or concerns feel free to open a new ticket and we will gladly help out.