Okay
  Public Ticket #3405750
Multiple Booking Buttons and Elementor Popup Integration
Closed

Comments

  • Romain started the conversation

    Hi, I've a couple of questions regarding the use of Amelia Booking plugin on my client's website.

    1. Multiple Booking Buttons for Individual Services: I am trying to implement a separate "Book Now" button for each service offered by my client. To achieve this, I am using the shortcode [ameliacatalogbooking service=1], [ameliacatalogbooking service=2], and so on, to create service-specific booking options. However, from my understanding, this requires creating a unique page for each shortcode to display the respective booking button. For instance, if there are 25 different services, I would need to create 25 separate pages. Could you please confirm if this is the only way to proceed or is there a more efficient alternative that would allow me to place multiple booking buttons on a single page?
    2. Integration Issue with Elementor Popup: I attempted to use the [ameliacatalogbooking] shortcode within an Elementor Popup. Unfortunately, this has led to a layout issue where the second step (the calendar) is displayed below the popup, making it impractical for users (please refer to the attached image for clarification). Is there a known solution or workaround to ensure that the calendar is properly displayed within the popup?

    Thank you in advance for your time and support.

    Best regards,
    Romain

    Attached files:  Capture d’écran 2023-07-03 à 13.08.29.png

  •  1,578
    Uroš replied

    Hello Romain,

    Thank you for reaching out to us.

    When you have created Employees, services and/or events in Amelia, you can add them on front-end using our shortcodes, which are explained in detail in the article "Amelia Shortcodes and Front-end implementation".

    In Elementor widgets, simply search for “Amelia” in Elementor’s side bar, and drag the widget onto a page:

    1765760820.png

    When it’s dragged into the page, the same parameter options seen in the Gutenberg block are shown in Elementor’s side panel:

    1281836611.png

    So, to cover all options in here real quick:

    1. Select Category – allows you to select a specific category you have created in Amelia. 
    2. Select Service – allows you to select a specific service created in Amelia;
    3. Select Employee – selection which filters the form per selected employee;
    4. Select Location – if your employees are working on multiple locations, you can choose which location’s bookings will appear in the window.
    5. Show All refers to “Services” and “Packages”, and is only available in Amelia’s Pro license (since packages are not included in the Basic license). With this option, you can choose if the form will show both services and packages (all), only services, or only packages. All these can be combined, but please be careful that you’re selecting actual values. For example, if you select [ameliacatalog category=1 employee=3 location=2], and there’s no Employee #3 working on Category 1, or on Location #2, the booking form will continuously load, and will not display anything.
    6. Load booking form manually – this is used for popups within Elementor, and that’s what we’re going to explain now.

    First, you need to actually create a Popup in Elementor, following Elementor's tutorial here.

    We added a shortcode for the popup - it needs to have the ID of the button that is calling the popup, so this is
    how one of the shortcodes should look like in the Elementor pop-up:

    [ameliabooking trigger=amelia-button-id]

    So, if the button ID is "my-popup-button" it will be:

    [ameliabooking trigger=my-popup-button]

    So, you create a Popup and add this shortcode in the popup.

    Please note: At the moment, you cannot use Elementor's Amelia widgets in the popup, so when configuring the popup, make sure to add the "Shortcode" widget, and manually type the shortcode you need:

    6052863904.png

    On the bottom-left part of the screen, click on the gear symbol to access Popup Settings:

    8128615255.png

    In there, go to "Advanced", and enable "Prevent Closing on Overlay":

    6043594822.png

    Then, on the page - add a button, on which the popup will be called, next to the "Link" field click on "Dynamic Tags" and select "Popup" from the drop-down:

    2954167864.png

    Then, click on "Popup" in the link field, and you'll see the settings for the popup. Click on the "All" drop-down, and type the name of the popup you previously created. Select it, and click away to close the settings:

    2721467348.png

    In the same form, below, you will see the "Button ID" field, where you need to add the ID for the trigger (from Amelia's shortcode):

    1226262590.png

    That is it - once you publish this page, when you click on the button, it will open a popup that will manually trigger the "my-popup-button" and open Amelia's booking form.

    Kind Regards, 

    Uros Jovanovic
    [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps, and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  • Romain replied

    Hello Uroš,

    Thank you for getting back to me.

    I apologize for any confusion in my initial communication. Let me clarify my query.

    I am using a shortcode like this [ameliacatalogbooking service=1] to target each service of my client. Therefore, I create a page (or a popup) on which I add the shortcode. Unless I'm mistaken, do I need to create a different page for each shortcode? At present, there are approximately 25 services, so I would need to create 25 Amelia shortcodes, and consequently 25 WordPress pages. Is this correct?

    Additionally, I have a second question regarding Elementor Popups. I have gone through the tutorial you sent me, but I need further clarification. Can you confirm whether it is possible to use the [ameliacatalogbooking] shortcode with Elementor Popups?

    Thank you for your assistance. I look forward to hearing from you.

    Best regards,

    Romain

  •  1,578
    Uroš replied

    Hello Romain,

    Thank you for clearing that up.

    Actually, no. You will have to create 25 different popups with 25 different buttons with specific ID. That way you will be able to open each different form with the specific button.

    Hope this helps you.

    Please let me know if you have any other questions.

    Kind Regards, 

    Uros Jovanovic
    [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps, and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables