Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Installation

https://documentation.gomeddo.com/widg/booker25-widget

How to demo

Video

Walkthrough

  1. Mention how to install the latest version of GoMeddo and refer to the Documentation

    1. https://documentation.gomeddo.com/gmd/install-the-latest-version

  1. Essential setup in Salesforce

    1. Demonstrate a simple Resource setup https://documentation.gomeddo.com/gmd/set-up-the-resource-types-resources-hierarchy

      1. Make it API visible

    2. Set up price and price calculation for the Resources you intend to use

    3. Set up or highlight the Reservation type intended to use in the demo https://documentation.gomeddo.com/gmd/reservation-types

    4. Set up description and picture for the Resources you intend to use (can easily access the required fields in the Salesforce Inspector Chrome Extension

Essential setup steps in the Widget setup UI

...

Install the Widget extension package https://documentation.gomeddo.com/widg/booker25-widget-overview

...

Select the resources that you would like to reserve

...

Select the default Reservation type/status that the widget should create in Salesforce when used

  1. Disable the reservation contacts checkbox

...

Select whether the widget should create a Lead or Contact from the details submitted by the end user https://documentation.gomeddo.com/widg/create-reservation-with-contact https://documentation.gomeddo.com/widg/view-leads-created-from-the-widget-on-the-reservat

...

Define time slot lengths and increments

...

Set up Colours (hex code) and Logos (image URL)

...

Mention the code snippet and mention that the integration of payments is possible https://documentation.gomeddo.com/widg/how-to-use-the-booker25-widget-on-your-website

...

Select Translations - emphasise you have to select one

...

Info

This page explains the steps needed to demo the GoMeddo Widget. If you have any questions or remarks, feel free to reach out to presales@gomeddo.com!

1. Install GoMeddo

Start with installing GoMeddo and performing the clean install configuration.

You can also verify if GoMeddo is already installed:

  1. Go to Setup

  2. Go to Installed Packages

  3. Search for GoMeddo

2. Install the Widget extension

Next, install and configure the widget as explained here.

You can also verify if the widget extension is already installed:

  1. Go to Setup

  2. Go to Installed Packages

  3. Search for GoMeddo Widget & Integration

3. Configure the widget

  1. Login to the widget configuration page

  2. In the menu, go to Reservation Settings and disable the ‘Use reservation contacts’ checkbox

    Image Added

  3. Go to Resource Settings, where you can select the Resource Type that you would like to reserve

    Image Added
  4. Go to Styling Settings, where you can set up Colours (with using the hex code of the chosen colour) and Logos (with using the image URL)

    Image Added

  5. In the menu, go to Translation Settings - here you have to select one translation. Otherwise an error occurs in the widget (for default, select English)

    Image Added

  6. Under the translation settings section, you can find further options for text setup (texts that you can see within the widget (eg.: support email address). In this section you can easily search with CMD+f or CTRL+f after looking at the widget and

...

  1. finding a text that you want to change

4. Create

...

a website

Info

We typically use Glitch to quickly create a web page with a full screen screenshot of an existing website, but feel free to use your own tools or Salesforce Experience Cloud.

  1. Go to https://glitch.com/

  2. Create an account and create a new project

    Image Added

  3. Select the glitch-hello-website option

  4. You can use this HTMLandCSS for the website

    Image Added

  5. You will need a long website screenshot

...

You can use the following code for the website

  1. HTMLhttps://pastebin.com/ZQZFyCrr

  2. CSS: https://pastebin.com/t664cP1D

...

  1. to serve as the example website. We typically use the GoFullPage extension to create this screenshot

  2. Upload the screenshot in the Assets folder of Glitch

  3. Use the image’s URL in the HTML code we provided in step 4:

    Image Added

  4. On the widget configuration page, go to Widget Code Settings and copy the ‘code snippet’ from the widget setup UI into the HTML script as also seen in the HTML script above.

...

  1. Or have a look at this article for more information on how to place the widget on your website.

...

5. Check your widget website and see how all the settings come to life 

...

Make a short recap what we set up

...

  • See the Resources with their corresponding descriptions and pictures

...

  • Test the flow and see how date picker generates available time slots from the calendar (it looks at the

...

  • Lightning Calendar in

...

  • Salesforce and checks availability

...

  • of your Resources based on

...

  • your conflict checking settings

  • Check styling - Logo, colours and texts within the widget

Test Drive creating a Reservation

  1. Make a reservation

...

Present the results in Salesforce (in the Lightning Calendar)

  1. to test if there are any setup errors

  2. Switch tabs back to your Salesforce environment

  3. Go to your

...

  1. Lightning Calendar and

...

  1. check the new reservation that appeared in the system as the result of the widget