diff --git a/www/jest-preprocess.js b/www/jest-preprocess.js
index 6240240d7d9e9..2d59111bc3506 100644
--- a/www/jest-preprocess.js
+++ b/www/jest-preprocess.js
@@ -1,5 +1,6 @@
 const babelOptions = {
   presets: [`babel-preset-gatsby`],
+  plugins: [`emotion`],
 }
 
 module.exports = require(`babel-jest`).createTransformer(babelOptions)
diff --git a/www/package.json b/www/package.json
index a56c4c4045dc9..a0c95811cfee0 100644
--- a/www/package.json
+++ b/www/package.json
@@ -8,6 +8,7 @@
     "@emotion/styled": "^10.0.7",
     "@reach/skip-nav": "^0.1.1",
     "@reach/visually-hidden": "^0.1.2",
+    "@xstate/react": "^0.2.1",
     "axios": "^0.18.0",
     "bluebird": "^3.5.1",
     "dotenv": "^6.0.0",
@@ -77,6 +78,7 @@
     "slugify": "^1.3.0",
     "typography": "^1.0.0-alpha.4",
     "typography-plugin-code": "^1.0.0-alpha.0",
+    "xstate": "^4.5.0",
     "zipkin": "^0.14.2",
     "zipkin-javascript-opentracing": "^2.0.0",
     "zipkin-transport-http": "^0.14.2"
diff --git a/www/src/components/docsearch-content.js b/www/src/components/docsearch-content.js
index 95a7033f146b2..bbb3c1e461a3c 100644
--- a/www/src/components/docsearch-content.js
+++ b/www/src/components/docsearch-content.js
@@ -1,7 +1,9 @@
 import React from "react"
+import FeedbackWidget from "./feedback-widget/lazy-feedback-widget"
 
 export default ({ children }) => (
   <main id={`reach-skip-nav`} className={`docSearch-content`}>
     {children}
+    <FeedbackWidget />
   </main>
 )
diff --git a/www/src/components/feedback-widget/buttons.js b/www/src/components/feedback-widget/buttons.js
new file mode 100644
index 0000000000000..a49967f28f1f4
--- /dev/null
+++ b/www/src/components/feedback-widget/buttons.js
@@ -0,0 +1,234 @@
+import React, { Fragment } from "react"
+import { css } from "@emotion/core"
+import styled from "@emotion/styled"
+import { keyframes } from "@emotion/core"
+import { ScreenReaderText } from "./styled-elements"
+import MdQuestionMark from "./question-mark-icon"
+import {
+  mediaQueries,
+  colors,
+  fontSizes,
+  radii,
+  shadows,
+  space,
+} from "../../utils/presets"
+
+const rotation = keyframes`
+  0% {
+    transform: translateX(${space[1]}) rotate(0deg);
+  }
+  100% {
+    transform: translateX(${space[1]}) rotate(360deg);
+  }
+`
+
+export const focusStyle = css`
+  box-shadow: 0 0 0 0.12rem ${colors.accent};
+  outline: none;
+`
+
+const buttonStyles = css`
+  -webkit-appearance: none;
+  align-items: center;
+  background: ${colors.gatsby};
+  border: none;
+  border-radius: ${radii[2]}px;
+  color: ${colors.white};
+  cursor: pointer;
+  display: flex;
+  font-size: ${fontSizes[1]};
+  padding: ${space[2]} ${space[3]};
+  transition: 0.5s;
+  z-index: 1;
+
+  svg {
+    height: ${space[4]};
+    transform: translateX(${space[1]});
+    width: ${space[4]};
+  }
+
+  &:focus {
+    ${focusStyle}
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.9;
+  }
+
+  &:hover {
+    box-shadow: 0 0 0 0.12rem ${colors.accent}88;
+  }
+`
+
+export const SubmitButton = styled(`button`)`
+  ${buttonStyles};
+
+  .submitting & {
+    svg {
+      animation: ${rotation} 1s linear infinite;
+    }
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    .submitting & {
+      svg {
+        animation: none;
+      }
+    }
+  }
+`
+
+export const CloseButton = styled(`button`)`
+  ${buttonStyles};
+  background: ${colors.white};
+  border: 1px solid ${colors.gray.border};
+  color: ${colors.gatsby};
+`
+
+export const ToggleButtonLabel = styled(`span`)`
+  align-items: center;
+  background: ${colors.white};
+  border: 1px solid ${colors.gray.border};
+  border-radius: ${radii[2]}px;
+  display: flex;
+  height: 2.5rem;
+  padding: 0 ${space[8]} 0 ${space[3]};
+  transition: 0.5s;
+  white-space: nowrap;
+  width: 100%;
+
+  ${mediaQueries.lg} {
+    box-shadow: ${shadows.floating};
+    width: auto;
+  }
+`
+
+export const ToggleButtonIcon = styled(`span`)`
+  align-items: center;
+  background: ${colors.lilac};
+  border-radius: ${radii[6]};
+  color: ${colors.white};
+  display: flex;
+  font-size: ${fontSizes[1]};
+  height: ${space[6]};
+  justify-content: center;
+  position: absolute;
+  right: ${space[3]};
+  transform: scale(1);
+  transition: 0.5s;
+  width: ${space[6]};
+
+  svg {
+    fill: ${colors.white};
+    height: ${space[3]};
+    width: ${space[3]};
+    transition: 0.5s;
+  }
+
+  ${mediaQueries.lg} {
+    .opened &,
+    .failed &,
+    .success &,
+    .submitting & {
+      &:hover {
+        svg {
+          transform: rotate(90deg);
+          fill: ${colors.accent};
+        }
+      }
+    }
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: 0;
+  }
+`
+
+export const ToggleButton = styled(`button`)`
+  align-items: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  position: relative;
+  transition: 0.6s ease;
+  width: 100%;
+  z-index: 3;
+
+  &:hover {
+    ${ToggleButtonLabel} {
+      box-shadow: 0 0 0 0.12rem ${colors.accent}88;
+    }
+  }
+
+  &:focus {
+    outline: none;
+
+    ${ToggleButtonLabel} {
+      ${focusStyle}
+    }
+  }
+
+  ${props =>
+    props.supressFocusAnimation &&
+    css`
+      ${ToggleButtonLabel} {
+        transition: 0s;
+      }
+    `}
+
+  .opened &,
+  .failed &,
+  .success &,
+  .submitting & {
+    display: none;
+  }
+
+  ${mediaQueries.lg} {
+    bottom: 0;
+    position: absolute;
+    right: 0;
+    width: auto;
+
+    .opened &,
+    .failed &,
+    .success &,
+    .submitting & {
+      display: flex;
+      transform: translate(-${space[2]}, -26rem);
+
+      ${ToggleButtonIcon} {
+        background: ${colors.white};
+        border: 1px solid ${colors.gray.border};
+        transform: scale(1.8);
+
+        svg {
+          fill: ${colors.gatsby};
+        }
+      }
+
+      &:focus {
+        ${ToggleButtonIcon} {
+          ${focusStyle};
+        }
+      }
+    }
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: 0;
+  }
+`
+
+export const OpenFeedbackWidgetButtonContent = ({ loading }) => (
+  <Fragment>
+    <ToggleButtonLabel>
+      {loading ? `Loading ...` : `Was this doc helpful to you`}
+      <ScreenReaderText>?</ScreenReaderText>
+    </ToggleButtonLabel>
+    <ToggleButtonIcon>
+      <MdQuestionMark />
+    </ToggleButtonIcon>
+  </Fragment>
+)
diff --git a/www/src/components/feedback-widget/feedback-form.js b/www/src/components/feedback-widget/feedback-form.js
new file mode 100644
index 0000000000000..7e7e1474fb595
--- /dev/null
+++ b/www/src/components/feedback-widget/feedback-form.js
@@ -0,0 +1,164 @@
+import React, { Fragment } from "react"
+import styled from "@emotion/styled"
+import WidgetWrapper from "./widget-wrapper"
+import { SubmitButton, CloseButton, focusStyle } from "./buttons"
+import { Actions, Title, ScreenReaderText } from "./styled-elements"
+import RatingOption from "./rating-option"
+import MdSentimentDissatisfied from "react-icons/lib/md/sentiment-dissatisfied"
+import MdSentimentNeutral from "react-icons/lib/md/sentiment-neutral"
+import MdSentimentVerySatisfied from "react-icons/lib/md/sentiment-very-satisfied"
+import MdSend from "react-icons/lib/md/send"
+import MdRefresh from "react-icons/lib/md/refresh"
+
+import { colors, fontSizes, radii, space } from "../../utils/presets"
+
+const Form = styled(`form`)`
+  margin-bottom: 0;
+`
+
+const Fieldset = styled(`fieldset`)`
+  border: 0;
+  margin: 0 0 ${space[4]};
+  padding: 0;
+`
+
+const Legend = styled(`legend`)`
+  display: inline-block;
+  font-size: ${fontSizes[1]};
+  margin-bottom: ${space[4]};
+  padding: 0 ${space[2]};
+  text-align: center;
+`
+
+const Rating = styled(`div`)`
+  align-content: stretch;
+  border: 1px solid ${colors.lilac};
+  border-radius: ${radii[3]}px;
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: stretch;
+  overflow: hidden;
+  transition: 0.5s;
+  width: 99.99%;
+
+  &:focus-within {
+    ${focusStyle}
+  }
+
+  [disabled] & {
+    opacity: 0.5;
+  }
+`
+
+const TextareaLabel = styled(`label`)`
+  font-size: ${fontSizes[1]};
+  font-weight: bold;
+
+  span {
+    font-weight: normal;
+  }
+`
+
+const Textarea = styled(`textarea`)`
+  border: 1px solid ${colors.gray.light};
+  border-radius: ${radii[2]}px;
+  display: block;
+  font-weight: normal;
+  height: 5.5rem;
+  margin: ${space[1]} 0 ${space[4]};
+  padding: ${space[1]} ${space[2]};
+  transition: 0.5s;
+  width: 100%;
+
+  &:focus {
+    ${focusStyle}
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`
+
+const FeedbackForm = ({
+  handleSubmit,
+  handleClose,
+  handleChange,
+  handleCommentChange,
+  titleRef,
+  rating,
+  comment,
+  submitting,
+}) => (
+  <WidgetWrapper id="feedback-widget" handleClose={handleClose}>
+    <Form
+      onSubmit={handleSubmit}
+      className={`${submitting ? `submitting` : ``}`}
+    >
+      <Title ref={titleRef} tabIndex="-1">
+        Was this doc helpful to you?
+      </Title>
+      <Fieldset className="ratings" disabled={submitting}>
+        <Legend>Rate your experience</Legend>
+        <Rating>
+          <RatingOption
+            iconLabel="frowning face"
+            icon={MdSentimentDissatisfied}
+            ratingText="poor"
+            ratingValue="1"
+            checked={rating === 1}
+            handleChange={handleChange}
+          />
+          <RatingOption
+            iconLabel="neutral face"
+            icon={MdSentimentNeutral}
+            ratingText="fine"
+            ratingValue="2"
+            checked={rating === 2}
+            handleChange={handleChange}
+          />
+          <RatingOption
+            iconLabel="smiling face"
+            icon={MdSentimentVerySatisfied}
+            ratingText="great"
+            ratingValue="3"
+            checked={rating === 3}
+            handleChange={handleChange}
+          />
+        </Rating>
+      </Fieldset>
+      <TextareaLabel className={`textarea ${submitting ? `disabled` : ``}`}>
+        Your comments <span>(optional):</span>
+        <Textarea
+          value={comment}
+          onChange={handleCommentChange}
+          disabled={submitting}
+        />
+      </TextareaLabel>
+      <Actions>
+        <CloseButton onClick={handleClose} disabled={submitting}>
+          Cancel{` `}
+          <ScreenReaderText className="sr-only">this widget</ScreenReaderText>
+        </CloseButton>
+        <SubmitButton
+          type="submit"
+          className={submitting && `submitting`}
+          disabled={submitting}
+        >
+          {submitting ? (
+            <Fragment>
+              Sending, wait <MdRefresh />
+            </Fragment>
+          ) : (
+            <Fragment>
+              Send feedback
+              <MdSend />
+            </Fragment>
+          )}
+        </SubmitButton>
+      </Actions>
+    </Form>
+  </WidgetWrapper>
+)
+
+export default FeedbackForm
diff --git a/www/src/components/feedback-widget/feedback-widget.js b/www/src/components/feedback-widget/feedback-widget.js
new file mode 100644
index 0000000000000..78193f0175c74
--- /dev/null
+++ b/www/src/components/feedback-widget/feedback-widget.js
@@ -0,0 +1,220 @@
+import React, { useRef, useEffect, useState, Fragment } from "react"
+import { post } from "axios"
+import { Machine, assign } from "xstate"
+import { useMachine } from "@xstate/react"
+
+import {
+  ToggleButton,
+  ToggleButtonIcon,
+  OpenFeedbackWidgetButtonContent,
+} from "./buttons"
+import FeedbackForm from "./feedback-form"
+import SubmitSuccess from "./submit-success"
+import SubmitError from "./submit-error"
+import { ScreenReaderText, WidgetContainer } from "./styled-elements"
+import MdClose from "react-icons/lib/md/close"
+
+const postFeedback = ({ rating, comment }) => {
+  const payload = {
+    variables: {
+      rating,
+      comment,
+      url: window.location.href,
+    },
+    query: `
+      mutation submit($rating: Int!, $url: String!, $comment: String) {
+        submitFeedback(input: {
+          rating: $rating,
+          originUrl: $url,
+          comment: $comment
+        })
+      }
+    `,
+  }
+
+  return post(process.env.GATSBY_FEEDBACK_ENDPOINT, payload)
+}
+
+const feedbackMachine = Machine({
+  id: `feedback`,
+  initial: `closed`,
+  context: {
+    rating: 2,
+    comment: ``,
+  },
+  states: {
+    opened: {
+      onEntry: `focusWidgetTitle`,
+      on: {
+        RATE: {
+          // Assign the RATE event value to the rating context
+          actions: assign({ rating: (_context, event) => event.value }),
+        },
+        COMMENT: {
+          actions: assign({ comment: (_ctx, e) => e.value }),
+        },
+        SUBMIT: `submitting`,
+      },
+    },
+    submitting: {
+      invoke: {
+        id: `postFeedback`,
+        src: ctx => postFeedback(ctx),
+        onDone: `success`,
+        onError: `failed`,
+      },
+    },
+    success: {
+      // TODO can we send these events to gatsby-telemetry?
+      onEntry: `focusSuccessTitle`,
+    },
+    failed: {
+      // TODO can we send these events to gatsby-telemetry?
+      on: {
+        OPEN: `opened`,
+      },
+      onEntry: `focusErrorTitle`,
+    },
+    closed: {
+      on: {
+        OPEN: `opened`,
+      },
+      onEntry: [assign({ comment: ``, rating: 2 })],
+    },
+  },
+  on: {
+    CLOSE: {
+      target: `closed`,
+      actions: `focusOpenButton`,
+    },
+  },
+})
+
+const FeedbackWidget = ({ initialOpened, initialFocused }) => {
+  const toggleButton = useRef(null)
+  const widgetTitle = useRef(null)
+  const successTitle = useRef(null)
+  const errorTitle = useRef(null)
+  const [supressFocusAnimation, setSupressFocusAnimation] = useState(
+    initialFocused
+  )
+
+  const [current, send] = useMachine(
+    feedbackMachine.withConfig({
+      actions: {
+        focusWidgetTitle() {
+          requestAnimationFrame(() => {
+            widgetTitle.current.focus()
+          })
+        },
+        focusSuccessTitle() {
+          requestAnimationFrame(() => {
+            successTitle.current.focus()
+          })
+        },
+        focusErrorTitle() {
+          requestAnimationFrame(() => {
+            errorTitle.current.focus()
+          })
+        },
+        focusOpenButton() {
+          requestAnimationFrame(() => {
+            toggleButton.current.focus()
+          })
+        },
+      },
+    })
+  )
+
+  useEffect(() => {
+    // if button was toggle before
+    // full feedback widget was loaded,
+    // make sure widget will be opened
+    if (initialOpened) {
+      send(`OPEN`)
+    }
+    // requestAnimationFrame(() => {
+    if (initialFocused) {
+      toggleButton.current.focus()
+      // hacky: don't animate initial focus
+      if (supressFocusAnimation) {
+        setSupressFocusAnimation(false)
+      }
+    }
+    // })
+  }, [])
+
+  const { rating, comment } = current.context
+
+  const handleChange = event => {
+    send({
+      type: `RATE`,
+      value: +event.target.value, // Use + to cast to an integer.
+    })
+  }
+
+  const handleCommentChange = event => {
+    // XXX is this actually safe?
+    const safeComment = event.target.value.replace(/(<([^>]+)>)/gi, ``)
+    send({
+      type: `COMMENT`,
+      value: safeComment,
+    })
+  }
+
+  const handleSubmit = event => {
+    event.preventDefault()
+    send(`SUBMIT`)
+  }
+
+  const handleOpen = () => send(`OPEN`)
+  const handleClose = () => send(`CLOSE`)
+  const handleToggle = () => send(!current.matches(`closed`) ? `CLOSE` : `OPEN`)
+
+  return (
+    <WidgetContainer className={current.value}>
+      <ToggleButton
+        ref={toggleButton}
+        className="feedback-trigger"
+        aria-haspopup="true"
+        onClick={handleToggle}
+        supressFocusAnimation={supressFocusAnimation}
+      >
+        {!current.matches(`closed`) ? (
+          <Fragment>
+            <ScreenReaderText>Close Rating Widget</ScreenReaderText>
+            <ToggleButtonIcon>
+              <MdClose />
+            </ToggleButtonIcon>
+          </Fragment>
+        ) : (
+          <OpenFeedbackWidgetButtonContent />
+        )}
+      </ToggleButton>
+      {(current.matches(`opened`) || current.matches(`submitting`)) && (
+        <FeedbackForm
+          handleClose={handleClose}
+          handleSubmit={handleSubmit}
+          handleChange={handleChange}
+          handleCommentChange={handleCommentChange}
+          titleRef={widgetTitle}
+          rating={rating}
+          comment={comment}
+          submitting={current.matches(`submitting`)}
+        />
+      )}
+      {current.matches(`failed`) && (
+        <SubmitError
+          handleClose={handleClose}
+          handleOpen={handleOpen}
+          titleRef={errorTitle}
+        />
+      )}
+      {current.matches(`success`) && (
+        <SubmitSuccess handleClose={handleClose} titleRef={successTitle} />
+      )}
+    </WidgetContainer>
+  )
+}
+
+export default FeedbackWidget
diff --git a/www/src/components/feedback-widget/lazy-feedback-widget.js b/www/src/components/feedback-widget/lazy-feedback-widget.js
new file mode 100644
index 0000000000000..c804f563624fd
--- /dev/null
+++ b/www/src/components/feedback-widget/lazy-feedback-widget.js
@@ -0,0 +1,65 @@
+import React, { useState } from "react"
+import { ToggleButton, OpenFeedbackWidgetButtonContent } from "./buttons"
+import { WidgetContainer } from "./styled-elements"
+
+const LazyFeedbackWidget = () => {
+  // We need to use wrapping object
+  // setWidget(<func>) would execute the function
+  // and we don't want that for function components
+  const [{ Widget, loading }, setWidget] = useState({
+    Widget: null,
+    loading: false,
+  })
+
+  const [wasClicked, setWasClicked] = useState(false)
+  const [wasFocused, setWasFocused] = useState(false)
+
+  const handleToggle = () => {
+    setWasClicked(true)
+    setTimeout(() => {
+      // if we didn't load widget within 1 second, show loading indicator
+      setWidget(state => {
+        if (!state.Widget) {
+          return {
+            loading: true,
+          }
+        }
+        return state
+      })
+    }, 1000)
+  }
+
+  const triggerLazyLoad = () => {
+    import(/* webpackChunkName: "feedback-widget" */ `./feedback-widget`).then(
+      imports => {
+        setWidget({ Widget: imports.default, loading: false })
+      }
+    )
+  }
+
+  if (!Widget) {
+    return (
+      <WidgetContainer>
+        <ToggleButton
+          onMouseOver={triggerLazyLoad}
+          onFocus={() => {
+            setWasFocused(true)
+            triggerLazyLoad()
+          }}
+          onBlur={() => {
+            setWasFocused(false)
+          }}
+          className="feedback-trigger"
+          aria-haspopup="true"
+          onClick={handleToggle}
+        >
+          <OpenFeedbackWidgetButtonContent loading={loading} />
+        </ToggleButton>
+      </WidgetContainer>
+    )
+  }
+
+  return <Widget initialOpened={wasClicked} initialFocused={wasFocused} />
+}
+
+export default LazyFeedbackWidget
diff --git a/www/src/components/feedback-widget/question-mark-icon.js b/www/src/components/feedback-widget/question-mark-icon.js
new file mode 100644
index 0000000000000..f90ad4b307dc1
--- /dev/null
+++ b/www/src/components/feedback-widget/question-mark-icon.js
@@ -0,0 +1,13 @@
+import React from "react"
+
+export default () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M10,19H13V22H10V19M12,2C17.35,2.22 19.68,7.62 16.5,11.67C15.67,12.67 14.33,13.33 13.67,14.17C13,15 13,16 13,17H10C10,15.33 10,13.92 10.67,12.92C11.33,11.92 12.67,11.33 13.5,10.67C15.92,8.43 15.32,5.26 12,5A3,3 0 0,0 9,8H6A6,6 0 0,1 12,2Z" />
+  </svg>
+)
diff --git a/www/src/components/feedback-widget/rating-option.js b/www/src/components/feedback-widget/rating-option.js
new file mode 100644
index 0000000000000..8c5c66363a41b
--- /dev/null
+++ b/www/src/components/feedback-widget/rating-option.js
@@ -0,0 +1,160 @@
+import React from "react"
+import styled from "@emotion/styled"
+import { keyframes } from "@emotion/core"
+
+import { colors, fontSizes, space } from "../../utils/presets"
+
+const animA = keyframes`
+  from  {
+    transform: translate3d(0,0,0);
+  }
+  20%, 53%, 80%, to {
+    transform: translate3d(0,0.3rem,0);
+  }
+
+  40%, 43% {
+    transform: translate3d(0, -0.5rem, 0);
+  }
+
+  70% {
+    transform: translate3d(0, -0.2rem, 0);
+  }
+
+  90% {
+    transform: translate3d(0,0,0);
+  }
+`
+const animB = keyframes`
+
+  25% {
+    transform: rotate(7deg);
+  }
+  75% {
+    transform: rotate(-7deg);
+  }
+`
+
+const animC = keyframes`
+  10% {
+    transform: translate3d(0, 0, 0);
+  }
+  60% {
+    transform: translate3d(0, -0.3rem, 0);
+  }
+  65% {
+    transform: translate3d(0, 0, 0);
+  }
+`
+
+const IconWrapper = styled(`span`)`
+  display: block;
+  height: ${space[9]};
+  transition: 0.5s;
+  width: ${space[9]};
+
+  svg {
+    color: ${colors.lilac};
+    height: 100%;
+    width: 100%;
+  }
+`
+
+const RatingText = styled(`span`)`
+  display: block;
+  font-size: ${fontSizes[0]};
+  font-weight: bold;
+  transition: 0.5s;
+  line-height: 1;
+  margin-top: ${space[1]};
+`
+
+const Label = styled(`label`)`
+  align-items: center;
+  background: ${colors.ui.light};
+  cursor: pointer;
+  display: flex;
+  flex-basis: 33.33%;
+  flex-direction: column;
+  justify-content: center;
+  height: 5.5rem;
+  text-align: center;
+  transition: background 0.25s;
+
+  &.focused {
+    background: ${colors.lilac};
+    color: ${colors.white};
+
+    ${IconWrapper} {
+      svg {
+        color: ${colors.accent};
+      }
+    }
+  }
+
+  fieldset[disabled] & {
+    cursor: not-allowed;
+  }
+
+  fieldset:not([disabled]) & {
+    &:hover {
+      &:nth-of-type(1) {
+        ${IconWrapper} {
+          transform: translateY(3.7rem);
+
+          svg {
+            animation: ${animC} 3s ease infinite;
+          }
+        }
+
+        ${RatingText} {
+          transform: translateY(-1.6rem);
+        }
+      }
+
+      &:nth-of-type(2) {
+        ${IconWrapper} {
+          animation: ${animB} ease-in-out 0.8s infinite;
+        }
+      }
+
+      &:nth-of-type(3) {
+        ${IconWrapper} {
+          animation: ${animA} 1.2s infinite;
+        }
+      }
+    }
+  }
+`
+
+const Input = styled(`input`)`
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+`
+
+const RatingOption = ({
+  iconLabel,
+  ratingText,
+  ratingValue,
+  checked,
+  handleChange,
+  icon: Icon,
+}) => (
+  <Label className={checked ? `focused` : null}>
+    <IconWrapper>
+      <Icon aria-label={iconLabel} />
+    </IconWrapper>
+    <RatingText className="level">{ratingText}</RatingText>
+    <Input
+      type="radio"
+      name="feedback"
+      value={ratingValue}
+      id={`rating${ratingValue}`}
+      checked={checked}
+      onChange={handleChange}
+    />
+  </Label>
+)
+
+export default RatingOption
diff --git a/www/src/components/feedback-widget/styled-elements.js b/www/src/components/feedback-widget/styled-elements.js
new file mode 100644
index 0000000000000..b62e9e1c1bf28
--- /dev/null
+++ b/www/src/components/feedback-widget/styled-elements.js
@@ -0,0 +1,61 @@
+import styled from "@emotion/styled"
+import {
+  mediaQueries,
+  fontSizes,
+  letterSpacings,
+  lineHeights,
+  space,
+} from "../../utils/presets"
+import { rhythm } from "../../utils/typography"
+
+export const WidgetContainer = styled(`div`)`
+  margin: ${space[7]} auto;
+  padding: 0 ${space[6]} ${space[9]};
+  max-width: ${rhythm(28)};
+
+  ${mediaQueries.md} {
+    padding-bottom: 0;
+  }
+
+  ${mediaQueries.lg} {
+    &:not(.closed) {
+      height: 26rem;
+      width: 20rem;
+    }
+
+    bottom: ${space[6]};
+    padding: 0;
+    position: fixed;
+    right: ${space[6]};
+    margin: 0;
+    width: auto;
+  }
+`
+
+export const Title = styled(`h2`)`
+  display: block;
+  font-size: ${fontSizes[4]};
+  letter-spacing: ${letterSpacings.tight};
+  line-height: ${lineHeights.dense};
+  margin: 0;
+  margin-bottom: ${space[2]};
+  text-align: center;
+`
+
+export const Actions = styled(`div`)`
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+`
+
+export const ScreenReaderText = styled(`span`)`
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  -webkit-clip: rect(0, 0, 0, 0);
+  height: 1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+`
diff --git a/www/src/components/feedback-widget/submit-error.js b/www/src/components/feedback-widget/submit-error.js
new file mode 100644
index 0000000000000..d5a34cea6db1f
--- /dev/null
+++ b/www/src/components/feedback-widget/submit-error.js
@@ -0,0 +1,26 @@
+import React from "react"
+import WidgetWrapper from "./widget-wrapper"
+import { CloseButton } from "./buttons"
+import { Actions, ScreenReaderText, Title } from "./styled-elements"
+import { SubmitButton } from "./buttons"
+import MdArrowForward from "react-icons/lib/md/arrow-forward"
+
+const SubmitError = ({ handleClose, handleOpen, titleRef }) => (
+  <WidgetWrapper className="feedback-success" handleClose={handleClose}>
+    <Title ref={titleRef} tabIndex="-1">
+      Oops! Something went wrong.
+    </Title>
+    <p>Please try again.</p>
+    <Actions>
+      <CloseButton onClick={handleClose}>
+        Cancel{` `}
+        <ScreenReaderText className="sr-only">this widget</ScreenReaderText>
+      </CloseButton>
+      <SubmitButton onClick={handleOpen}>
+        Try Again <MdArrowForward />
+      </SubmitButton>
+    </Actions>
+  </WidgetWrapper>
+)
+
+export default SubmitError
diff --git a/www/src/components/feedback-widget/submit-success.js b/www/src/components/feedback-widget/submit-success.js
new file mode 100644
index 0000000000000..29a2bb9d47983
--- /dev/null
+++ b/www/src/components/feedback-widget/submit-success.js
@@ -0,0 +1,26 @@
+import React from "react"
+import styled from "@emotion/styled"
+import WidgetWrapper from "./widget-wrapper"
+import { CloseButton } from "./buttons"
+import { Title as BaseTitle } from "./styled-elements"
+import { fontSizes, space } from "../../utils/presets"
+
+const Title = styled(BaseTitle)`
+  font-size: ${fontSizes[6]};
+  margin-bottom: ${space[6]};
+  text-align: left;
+`
+
+const SubmitSuccess = ({ handleClose, titleRef }) => (
+  <WidgetWrapper className="feedback-success" handleClose={handleClose}>
+    <Title ref={titleRef} tabIndex="-1">
+      Thanks for your feedback!
+    </Title>
+    <p>Your ratings and comments can help make Gatsby even better.</p>
+    <CloseButton className="dismiss" onClick={handleClose}>
+      Dismiss
+    </CloseButton>
+  </WidgetWrapper>
+)
+
+export default SubmitSuccess
diff --git a/www/src/components/feedback-widget/widget-wrapper.js b/www/src/components/feedback-widget/widget-wrapper.js
new file mode 100644
index 0000000000000..6315ac5b13ae3
--- /dev/null
+++ b/www/src/components/feedback-widget/widget-wrapper.js
@@ -0,0 +1,98 @@
+/** @jsx jsx */
+import { jsx } from "@emotion/core"
+import styled from "@emotion/styled"
+import { keyframes } from "@emotion/core"
+import {
+  mediaQueries,
+  colors,
+  radii,
+  shadows,
+  space,
+} from "../../utils/presets"
+
+const boldEntry = keyframes`
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+`
+
+const opacityEntry = keyframes`
+  0% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+`
+
+const WrapperDiv = styled(`div`)`
+  background-color: ${colors.white};
+  border-top: 1px solid ${colors.gray.border};
+  height: 100%;
+  opacity: 0.5;
+  padding: ${space[6]} 0;
+  width: 100%;
+  z-index: 2;
+
+  [tabindex="-1"]:focus {
+    outline: none;
+  }
+
+  .opened & {
+    animation: ${boldEntry} 0.5s ease forwards;
+  }
+
+  .failed &,
+  .success & {
+    animation: ${opacityEntry} 0.5s ease forwards;
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    .opened & {
+      animation: none;
+      transform: scale(1);
+      opacity: 1;
+    }
+
+    .failed &,
+    .success & {
+      animation: none;
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  .submitting & {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  ${mediaQueries.lg} {
+    box-shadow: ${shadows.overlay};
+    border: 1px solid ${colors.gray.border};
+    border-radius: ${radii[2]}px;
+    height: 100%;
+    padding: ${space[7]} ${space[6]};
+    transform: scale(0);
+    transform-origin: top center;
+  }
+`
+
+const WidgetWrapper = ({ children, handleClose = () => {} }) => {
+  const handleEscapeKey = event => {
+    if (event.keyCode === 27) {
+      handleClose()
+    }
+  }
+
+  return (
+    <WrapperDiv role="dialog" onKeyDown={handleEscapeKey}>
+      {children}
+    </WrapperDiv>
+  )
+}
+
+export default WidgetWrapper
diff --git a/www/src/utils/tokens/colors.js b/www/src/utils/tokens/colors.js
index 76ad83333b683..bff627e11cf1e 100644
--- a/www/src/utils/tokens/colors.js
+++ b/www/src/utils/tokens/colors.js
@@ -8,7 +8,7 @@ export default {
   gatsbyDarker: `#221133`,
   lemon: `#ffdf37`,
   mint: `#73fff7`,
-  lilac: `#8c65b3`,
+  lilac: `#8A4BAF`,
   lavender: `#b190d5`,
   wisteria: `#ccb2e5`,
   // accent color from the "bolder palette" by @ArchieHicklin