Page Comparison

...

Essential setup steps in the Widget setup UI
1. Select the resources that you would like to reserve
2. Select the default Reservation type/status that the widget should create in Salesforce when used
  1. Disable the reservation contacts checkbox
3. Select whether the widget should create a Lead or Contact from the details submitted by the end user
4. Define time slot lengths and increments
5. Set up Colours (hex code) and Logos (image URL)
6. Mention the code snippet and mention that the integration of payments is possible
7. Select Translations - emphasise you have to select one
8. Mention text setup section that you can see below - in this section you can easily search with CMD+f or CTRL+f after looking at the widget and noticing a text that you want to change

Glitch

Code Block

language	html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!--
      This is the page head - it contains info the browser uses to display the page
      You won't see what's in the head in the page
      Scroll down to the body element for the page content
    -->

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="https://cdn.glitch.global/56f3d5cb-b7a9-4ba2-a950-8993afbf0174/celer-favicon.png?v=1661773630649" />

    <!-- 
      This is an HTML comment
      You can write text in a comment and the content won't be visible in the page
    -->

    <title>GoMeddo</title>

    <!-- Meta tags for SEO and social sharing -->
    <link rel="canonical" href="https://cdn.glitch.global/56f3d5cb-b7a9-4ba2-a950-8993afbf0174/celer-link-image.png?v=1661773629241" />
    <meta
      name="description"
      content="Book a Test Drive"
    />
    <meta name="robots" content="index,follow" />
    <meta property="og:title" content="GoMeddo" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="https://cdn.glitch.global/56f3d5cb-b7a9-4ba2-a950-8993afbf0174/celer-link-image.png?v=1661773629241" />
    <meta
      property="og:description"
      content="Book a Test Drive"
    />
    <meta
      property="og:image"
      content="https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2Fhello-website-social.png?v=1616712748147"
    />
    <meta name="twitter:card" content="summary" />

    <!-- Import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css" />

    <!-- Import the webpage's javascript file -->
    <script src="/script.js" defer></script>
  </head>

  <body style="background-color: #16072D">    
    
<!-- The script tag does not need to be near the booker-widget tag -->
       <img style="max-width:100%" src="https://cdn.glitch.global/fad7e81d-7a38-4a56-a5b5-36f5c9589ff0/website.png?v=1674807648755">
    

  </body>
<script>
  (function() {
      const script = document.createElement('script');
      script.src = 'https://dev.widget.gomeddo.com/js/widget25.js';
      script.async = true;
      script.onload = function () {
        const button = document.createElement('booker-button');
        button.setAttribute('business', 'forney');
        button.setAttribute('page', '9cd48049-0a73-4620-97be-90e21ea51614');
        button.setAttribute('auto', 'reservation');
        document.body.insertBefore(button, null);
      }
      document.body.insertBefore(script, null);
  }());
</script>
</html>

Code Block

language	css

/******************************************************************************
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and 
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/


/* 
  The style rules specify elements by type and by attributes such as class and ID
  Each section indicates an element or elements, then lists the style properties to apply
  See if you can cross-reference the rules in this file with the elements in index.html
*/

/* Our default values set as CSS variables */
:root {
  --color-bg: #69F7BE;
  --color-text-main: #000000;
  --color-primary: #FFFF00;
  --wrapper-height: 87vh;
  --image-max-width: 300px;
  --image-margin: 3rem;
  --font-family: "HK Grotesk";
  --font-family-header: "HK Grotesk";
}

/* Basic page style resets */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

/* Import fonts */
@font-face {
  font-family: HK Grotesk;
  src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027")
    format("opentype");
}
@font-face {
  font-family: HK Grotesk;
  font-weight: bold;
  src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Bold.otf?v=1603136323437")
    format("opentype");
}

/* Our remix on glitch button */
.btn--remix {
  font-family: HK Grotesk;
  padding: 0.75rem 1rem;
  font-size: 1.1rem;
  line-height: 1rem;
  font-weight: 500;
  height: 2.75rem;
  align-items: center;
  cursor: pointer;
  background: #FFFFFF;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  text-decoration: none;
  color: #000;
  white-space: nowrap;
  margin-left: auto;
}
.btn--remix img {
  margin-right: 0.5rem;
}
.btn--remix:hover {
  background-color: #D0FFF1;
}

/* Navigation grid */
.footer {
  display: flex;
  justify-content: space-between;
  margin: 1rem auto 0;
  padding: 1rem 0 0.75rem 0;
  width: 100%;
  flex-wrap: wrap;
  border-top: 4px solid #fff;
}

.footer a:not(.btn--remix):link,
a:not(.btn--remix):visited {
  font-family: HK Grotesk;
  font-style: normal;
  font-weight: normal;
  font-size: 1.1rem;
  color: #000;
  text-decoration: none;
  border-style: none;
}
.footer a:hover {
  background: var(--color-primary);
}

.footer .links {
  padding: 0.5rem 1rem 1.5rem;
  white-space: nowrap;
}

.divider {
  padding: 0 1rem;
}
/******************************************************************************
END Glitch hello-app default styles
******************************************************************************/

body {
  font-family: HK Grotesk;
  background-color: #16072D;
}

/* Page structure */
.wrapper {
  min-height: var(--wrapper-height);
  display: grid;
  place-items: center;
  margin: 0 1rem;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Very light scaling for our illustration */
.title {
  color: #2800FF;
  font-family: HK Grotesk;
  font-style: normal;
  font-weight: bold;
  font-size: 100px;
  line-height: 105%;
  margin: 0;
}

/* Very light scaling for our illustration */
.illustration {
  max-width: 100%;
  max-height: var(--image-max-width);
  margin-top: var(--image-margin);
}

/* Instructions */
.instructions {
  margin: 1rem auto 0;
}

/* Button - Add it from the README instructions */
button,
input {
  font-family: inherit;
  font-size: 100%;
  background: #FFFFFF;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  transition: 500ms;
}

/* Subheading */
h2 {
  color: #2800FF;
}

/* Interactive image */
.illustration:active {
  transform: translateY(5px);
}

/* Button dip
- Toggling this class on and off will move it down and up again
- The button transition property above determines the speed of the translate (500ms)
*/
.dipped {
  transform: translateY(5px);
}

Go go to the ready widget page and show how all the settings come to life
1. Make a short recap what we set up
2. Show the Resources with their corresponding descriptions and pictures
3. Explain how its a ‘date picker’ from the calendar (it looks at the lightning calendar in salesforce and checks availability if the resources based on the settings in the previous step)
4. Show styling - Logo, colours and texts within the widget

...

title	CLICK HERE

...

Present the results in Salesforce (in the Lightning Calendar)
1. Switch tabs back to your Salesforce environment
2. Go to your lightning calendar and present the new reservation that appeared in the system as the result of the widget

...

Versions Compared

Old Version 5

New Version 6

Key