Add CTA button to restaurant menu

Ask the Community Customization
1

  • Issue description: is it possible to add BUTTON that opens link to either the menu caption area OR in the ITEM section of menu?

  • Look at the 1 scooter and 2 scooter buttons on here and you will see what I mean.

  • Link to the page with the widget in question: https://a3b8273e74dc46079e1099bc96f07690.elf.site

3

Hi @Dart_Scooter :waving_hand:

Just a few quick questions to make sure we understand what you need:

  1. Should this button be added inside the Restaurant Menu widget, or is it a separate button on your site? If it’s part of the widget, could you specify exactly where you’d like it placed?

  2. If it’s a separate button, do you already have one on your site and just need it linked, or would you like us to create it from scratch?

  3. When someone clicks the button, should it open a specific Restaurant Menu tab (like Scooter 1 or 2)?

4

Yes inside the restaurant menu widget!

and if could be added in the caption section of the menu OR in the item section of the menu.

5

Ah, you’d like to display buttons instead of these links, am I right?

image
image249×138 2.63 KB

6

and I guess Book Now links as well?

7

yes sure! And if you go to the two Scooter menu, then the item and you see the 2hour, 3 hour pics and book now link

8

Got you, thanks!

Each Caption field has a Code Editor mode:

image
image331×266 6.17 KB


Here is how your BOOK NOW link looks in the Code Editor mode:

div><a target="_blank" href="https://dcscooter.com/rent-2/ola/services/1-scooter-for-2-hours-no-delivery">BOOK NOW</a></div>

image
image333×261 6.22 KB


To display it as a button you should add a code snippet with styles for button creation to the Code Editor. Here is an example:

<div>
  <a target="_blank" href="https://dcscooter.com/rent-2/ola/services/2-riders-2-hours-1" 
     style="display: inline-block; 
            background-color: #007bff; 
            color: white; 
            padding: 15px 30px; 
            font-size: 18px; 
            font-weight: bold; 
            text-decoration: none; 
            border-radius: 8px; 
            font-family: Arial, sans-serif;">
    <strong>BOOK NOW</strong>
  </a>
</div>

image
image1485×917 47.7 KB

Feel free to adjust the button styles in the code to your liking. Check it out and let me know if it helped :wink: