diff --git a/app/component/EmbeddedSearch/EmbeddedSearch.js b/app/component/EmbeddedSearch/EmbeddedSearch.js
index 1feded154a..913d805b4b 100644
--- a/app/component/EmbeddedSearch/EmbeddedSearch.js
+++ b/app/component/EmbeddedSearch/EmbeddedSearch.js
@@ -6,6 +6,7 @@ import { matchShape } from 'found';
 import DTAutosuggestPanel from '@digitransit-component/digitransit-component-autosuggest-panel';
 import CtrlPanel from '@digitransit-component/digitransit-component-control-panel';
 import i18next from 'i18next';
+import Datetimepicker from '@digitransit-component/digitransit-component-datetimepicker';
 import { getRefPoint } from '../../util/apiUtils';
 import withSearchContext from '../WithSearchContext';
 import {
@@ -87,6 +88,11 @@ const EmbeddedSearch = (props, context) => {
     });
   });
 
+  const [state, setState] = useState({
+    isAlwaysOpen: true,
+    time: undefined,
+    arriveBy: false,
+  });
   const defaultOriginExists = query.lat1 && query.lon1;
   const defaultOrigin = {
     lat: Number(query.lat1),
@@ -103,6 +109,7 @@ const EmbeddedSearch = (props, context) => {
     name: query.address2,
   };
   const useDestinationLocation = query?.destinationLoc;
+  const isTimepickerSelected = query.timepicker;
   const [logo, setLogo] = useState();
   const [origin, setOrigin] = useState(
     useOriginLocation
@@ -241,6 +248,13 @@ const EmbeddedSearch = (props, context) => {
     ]);
 
     targetUrl.search += buildQueryString(utmCampaignParams);
+    if (state.time !== undefined) {
+      targetUrl.search += `&time=${state.time}`;
+    }
+
+    if (state.arriveBy) {
+      targetUrl.search += `&arriveBy=${state.arriveBy}`;
+    }
 
     addAnalyticsEvent({
       category: 'EmbeddedSearch',
@@ -298,11 +312,66 @@ const EmbeddedSearch = (props, context) => {
     return <Loading />;
   }
 
+  const onDepartureClick = time => {
+    setState({ ...state, time, arriveBy: false });
+    addAnalyticsEvent({
+      event: 'sendMatomoEvent',
+      category: 'EmbeddedSearch',
+      action: 'LeavingArrivingSelection',
+      name: 'SelectLeaving',
+    });
+  };
+
+  const onTimeChange = (time, arriveBy, onSubmit = false) => {
+    setState({
+      ...state,
+      time,
+      arriveBy: !!arriveBy,
+      onSubmit,
+    });
+    addAnalyticsEvent({
+      action: 'EditJourneyTime',
+      category: 'EmbeddedSearch',
+      name: null,
+    });
+  };
+
+  const onDateChange = (time, arriveBy) => {
+    setState({
+      ...state,
+      time,
+      arriveBy: !!arriveBy,
+    });
+    addAnalyticsEvent({
+      action: 'EditJourneyDate',
+      category: 'EmbeddedSearch',
+      name: null,
+    });
+  };
+
+  const onNowClick = () => {
+    setState({
+      ...state,
+      time: undefined,
+      arriveBy: false,
+    });
+  };
+
+  const onArrivalClick = time => {
+    setState({ ...state, time, arriveBy: true });
+    addAnalyticsEvent({
+      event: 'sendMatomoEvent',
+      category: 'EmbeddedSearch',
+      action: 'LeavingArrivingSelection',
+      name: 'SelectArriving',
+    });
+  };
+
   return (
     <div
       className={`embedded-seach-container ${
         bikeOnly ? 'bike' : walkOnly ? 'walk' : ''
-      }`}
+      } ${isTimepickerSelected ? 'with-timepicker' : ''}`}
       id={appElement}
     >
       <div className="background-container">{drawBackgroundIcon()}</div>
@@ -321,6 +390,33 @@ const EmbeddedSearch = (props, context) => {
             targets={locationSearchTargets}
             {...locationSearchProps}
           />
+
+          {isTimepickerSelected && (
+            <div className="datetimepicker-container">
+              <Datetimepicker
+                realtime={false}
+                initialTimestamp={state.time}
+                initialArriveBy={state.arriveBy}
+                onTimeChange={onTimeChange}
+                onDateChange={onDateChange}
+                onNowClick={onNowClick}
+                onDepartureClick={onDepartureClick}
+                onArrivalClick={onArrivalClick}
+                embedWhenClosed={null}
+                embedWhenOpen={null}
+                lang={lang}
+                color={colors.primary}
+                timeZone={config.timezoneData.split('|')[0]}
+                serviceTimeRange={context.config.itinerary.serviceTimeRange}
+                fontWeights={config.fontWeights}
+                onOpen={null}
+                onClose={null}
+                openPicker
+                isAlwaysOpen={state.isAlwaysOpen}
+              />
+            </div>
+          )}
+
           <div className="embedded-search-button-container">
             {logo ? (
               <img
diff --git a/app/component/EmbeddedSearchGenerator.js b/app/component/EmbeddedSearchGenerator.js
index f8243c78b4..eac97774c2 100644
--- a/app/component/EmbeddedSearchGenerator.js
+++ b/app/component/EmbeddedSearchGenerator.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { FormattedMessage, intlShape } from 'react-intl';
 import connectToStores from 'fluxible-addons-react/connectToStores';
 import DTAutosuggest from '@digitransit-component/digitransit-component-autosuggest';
@@ -22,6 +22,7 @@ const EmbeddedSearchGenerator = (props, context) => {
   const { breakpoint, lang } = props;
   const { config, intl } = context;
   const { colors, fontWeights } = config;
+  const [isTimepickerSelected, setIsTimepickerSelected] = useState(false);
   const MIN_WIDTH = 360;
   const MAX_WIDTH = 640;
 
@@ -112,14 +113,25 @@ const EmbeddedSearchGenerator = (props, context) => {
     mode[searchModeRestriction.substring(0, searchModeRestriction.length - 2)] =
       'true';
     const searchMatch = {
-      location: { query: { ...mode, ...locData, lang: searchLang } },
+      location: {
+        query: {
+          ...mode,
+          ...locData,
+          lang: searchLang,
+          timepicker: isTimepickerSelected,
+        },
+      },
     };
     return <EmbeddedSearch match={searchMatch} />;
   };
 
   const generateComponentString = () => {
     const currentURL = window.location.origin;
-    let iframeHTML = `<iframe width="${searchWidth}" height="250" style="border-radius: 10px;" src="${currentURL}${EMBEDDED_SEARCH_PATH}?${searchModeRestriction}&lang=${searchLang}`;
+    let iframeHTML = `<iframe width="${searchWidth}" height=${
+      isTimepickerSelected ? '380' : '250'
+    } style="border-radius: 10px;" src="${currentURL}${EMBEDDED_SEARCH_PATH}?${searchModeRestriction}&lang=${searchLang}${
+      isTimepickerSelected ? '&timepicker=true' : ''
+    }`;
     if (!chooseFreely) {
       if (searchOriginDefined && searchOrigin) {
         if (originIsCurrentLocation()) {
@@ -164,6 +176,14 @@ const EmbeddedSearchGenerator = (props, context) => {
     }
   };
 
+  useEffect(() => {
+    if (isTimepickerSelected) {
+      setSearchWidth(MIN_WIDTH + 90);
+    } else {
+      setSearchWidth(MIN_WIDTH);
+    }
+  }, [isTimepickerSelected]);
+
   return (
     <section id="mainContent" className="content">
       <div
@@ -181,7 +201,7 @@ const EmbeddedSearchGenerator = (props, context) => {
             />
           </h2>
 
-          <fieldset id="lang">
+          <fieldset id="lang" className="fieldset">
             <legend>
               <h3>
                 <FormattedMessage
@@ -228,7 +248,7 @@ const EmbeddedSearchGenerator = (props, context) => {
             </label>
           </fieldset>
 
-          <fieldset id="width">
+          <fieldset id="width" className="fieldset">
             <legend>
               <h3>
                 <FormattedMessage
@@ -254,11 +274,11 @@ const EmbeddedSearchGenerator = (props, context) => {
                   hanldeWidthOnBlur(event.target.value);
                 }}
               />
-              <span> px x 250px</span>
+              <span> px x {isTimepickerSelected ? '400px' : '250px'}</span>
             </label>
           </fieldset>
 
-          <fieldset id="mode-restrictions">
+          <fieldset id="mode-restrictions" className="fieldset">
             <legend>
               <h3>
                 <FormattedMessage
@@ -306,7 +326,7 @@ const EmbeddedSearchGenerator = (props, context) => {
             </label>
           </fieldset>
 
-          <fieldset id="origin-and-destination">
+          <fieldset id="origin-and-destination" className="fieldset">
             <legend>
               <h3>
                 <FormattedMessage
@@ -411,6 +431,34 @@ const EmbeddedSearchGenerator = (props, context) => {
             )}
           </fieldset>
 
+          <fieldset id="time-picker" className="fieldset">
+            <legend>
+              <h3>
+                <FormattedMessage
+                  id="timepicker-component"
+                  defaultMessage="Time selector"
+                />
+              </h3>
+            </legend>
+
+            <label htmlFor="choose-timepicker">
+              <input
+                type="checkbox"
+                value="0"
+                name="origin-and-destination"
+                id="choose-timepicker"
+                onChange={() =>
+                  setIsTimepickerSelected(prevState => !prevState)
+                }
+                checked={isTimepickerSelected}
+              />
+              <FormattedMessage
+                id="choose-timepicker"
+                defaultMessage="Add a timepicker"
+              />
+            </label>
+          </fieldset>
+
           <div
             className="embed-preview"
             onFocus={e => {
@@ -422,10 +470,11 @@ const EmbeddedSearchGenerator = (props, context) => {
               <FormattedMessage id="preview" defaultMessage="Preview" />
             </h3>
             <div
-              className="embedded-search-container"
+              className={`embedded-search-container ${
+                isTimepickerSelected ? 'with-timepicker' : ''
+              }`}
               id="embedded-search-container-id"
               style={{
-                height: 250,
                 width: searchWidth,
                 minWidth: MIN_WIDTH,
                 maxWidth: MAX_WIDTH,
diff --git a/app/component/embeddedSearch.scss b/app/component/embeddedSearch.scss
index 32575164db..02c365681c 100644
--- a/app/component/embeddedSearch.scss
+++ b/app/component/embeddedSearch.scss
@@ -5,6 +5,7 @@
     width: 100vw;
     max-width: 100%;
     overflow: hidden;
+
     .background-container, .control-panel-container{
         grid-column: 1;
         grid-row: 1;
@@ -56,3 +57,8 @@
         }
     }
 }
+
+.with-timepicker {
+    height: 380px;
+    width: 450px;
+}
diff --git a/app/component/embeddedSearchGenerator.scss b/app/component/embeddedSearchGenerator.scss
index 524a1b2af7..2a1c72e00d 100644
--- a/app/component/embeddedSearchGenerator.scss
+++ b/app/component/embeddedSearchGenerator.scss
@@ -2,9 +2,12 @@
     font-family: $font-family;
     margin: auto;
 
-    fieldset {
+    .fieldset {
+        margin: 1.125rem 0;
+        padding: 1.125rem 0 1.125rem 0;
         max-width: 350px;
         border: none;
+
         legend {
             background: none;
         }
@@ -121,10 +124,10 @@
         }
     }
 
-    .embed-preview, fieldset {
-        margin: 1.125rem 0;
-        padding: 1.125rem 0 1.125rem 0;
-    }
+    //.embed-preview, fieldset {
+    //    margin: 1.125rem 0;
+    //    padding: 1.125rem 0 1.125rem 0;
+    //}
     .embed-preview {
         pointer-events: none;
         user-select: none;
diff --git a/app/translations.js b/app/translations.js
index 4978a67162..2306bbe1cf 100644
--- a/app/translations.js
+++ b/app/translations.js
@@ -978,6 +978,7 @@ const translations = {
     'choose-freely': 'Optional',
     'choose-stop': 'Select stop',
     'choose-stop-or-vehicle': 'Select vehicle or stop',
+    'choose-timepicker': 'Add a timepicker',
     'choose-vehicle': 'Select vehicle',
     citybike: 'City bike',
     'citybike-distance-duration': 'Bike {duration} ({distance})',
@@ -1601,6 +1602,7 @@ const translations = {
     time: 'Time',
     'time-selector-hours-label': 'Hour',
     'time-selector-minutes-label': 'Minute',
+    'timepicker-component': 'Time picker',
     timetable: 'Timetable',
     'to-frontpage': 'To the front page',
     'to-rail': 'train',
@@ -2155,6 +2157,7 @@ const translations = {
     'choose-freely': 'Vapaasti valittavat',
     'choose-stop': 'Valitse pysäkki',
     'choose-stop-or-vehicle': 'Valitse linja tai pysäkki',
+    'choose-timepicker': 'Lisää aikavalitsin',
     'choose-vehicle': 'Valitse linja',
     citybike: 'Kaupunkipyörä',
     'citybike-distance-duration': 'Pyöräile {duration} ({distance})',
@@ -2775,6 +2778,7 @@ const translations = {
     time: 'Aika',
     'time-selector-hours-label': 'Tunti',
     'time-selector-minutes-label': 'Minuutti',
+    'timepicker-component': 'Aikavalitsin',
     timetable: 'Aikataulu',
     'to-frontpage': 'Etusivulle',
     'to-rail': 'junaan',
@@ -4102,6 +4106,7 @@ const translations = {
     'choose-freely': 'Valfria',
     'choose-stop': 'Välj hållplats',
     'choose-stop-or-vehicle': 'Select vehicle or stop',
+    'choose-timepicker': 'Lägg till en tidsväljare',
     'choose-vehicle': 'Select vehicle',
     citybike: 'Stadscykel',
     'citybike-distance-duration': 'Cykla {duration} ({distance})',
@@ -4729,6 +4734,7 @@ const translations = {
     time: 'Tid',
     'time-selector-hours-label': 'Timme',
     'time-selector-minutes-label': 'Minut',
+    'timepicker-component': 'Tidsväljare',
     timetable: 'Tidtabell',
     'to-ferry': 'färjan',
     'to-frontpage': 'Till startsidan',
diff --git a/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/Datetimepicker.js b/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/Datetimepicker.js
index e10efb330e..05c54e44f4 100644
--- a/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/Datetimepicker.js
+++ b/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/Datetimepicker.js
@@ -75,6 +75,7 @@ function Datetimepicker({
   onOpen,
   onClose,
   openPicker,
+  isAlwaysOpen,
 }) {
   moment.tz.setDefault(timeZone);
   const [isOpen, changeOpen] = useState(openPicker || false);
@@ -283,7 +284,7 @@ function Datetimepicker({
         <div
           className={`${styles['datetimepicker-open-container']} ${
             !isOpen ? styles.hidden : ''
-          }`}
+          } ${isAlwaysOpen ? styles['blank-container'] : ''}`}
         >
           <div
             className={
@@ -358,28 +359,30 @@ function Datetimepicker({
             >
               {i18next.t('departure-now', translationSettings)}
             </button>
-            <span className={styles['right-edge']}>
-              <button
-                type="button"
-                className={styles['close-button']}
-                aria-controls={`${htmlId}-root`}
-                aria-expanded="true"
-                onClick={() => {
-                  changeOpen(false);
-                  showScreenreaderCloseAlert();
-                  if (onClose) {
-                    onClose();
-                  }
-                }}
-              >
-                <span className={styles['close-icon']}>
-                  <Icon img="close" color={color} />
-                </span>
-                <span className={styles['sr-only']}>
-                  {i18next.t('accessible-close', translationSettings)}
-                </span>
-              </button>
-            </span>
+            {!isAlwaysOpen && (
+              <span className={styles['right-edge']}>
+                <button
+                  type="button"
+                  className={styles['close-button']}
+                  aria-controls={`${htmlId}-root`}
+                  aria-expanded="true"
+                  onClick={() => {
+                    changeOpen(false);
+                    showScreenreaderCloseAlert();
+                    if (onClose) {
+                      onClose();
+                    }
+                  }}
+                >
+                  <span className={styles['close-icon']}>
+                    <Icon img="close" color={color} />
+                  </span>
+                  <span className={styles['sr-only']}>
+                    {i18next.t('accessible-close', translationSettings)}
+                  </span>
+                </button>
+              </span>
+            )}
           </div>
           <div
             className={
@@ -541,6 +544,7 @@ Datetimepicker.propTypes = {
   onOpen: PropTypes.func,
   onClose: PropTypes.func,
   openPicker: PropTypes.bool,
+  isAlwaysOpen: PropTypes.bool,
 };
 
 Datetimepicker.defaultProps = {
@@ -553,6 +557,7 @@ Datetimepicker.defaultProps = {
   onOpen: null,
   onClose: null,
   openPicker: undefined,
+  isAlwaysOpen: false,
 };
 
 export default Datetimepicker;
diff --git a/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/styles.scss b/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/styles.scss
index ee0c2b569c..96d52c18f4 100644
--- a/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/styles.scss
+++ b/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/styles.scss
@@ -49,6 +49,13 @@ $zindex: base, map-container, map-gradient, map-fullscreen-toggle,
     background-color: #f4f4f5;
     border-radius: 5px;
     padding: 15px;
+
+    &.blank-container {
+      background-color: white;
+      margin: 10px 0 0 0;
+      padding: 1rem;
+      max-width: 399px;
+    }
   }
 
   .top-row-container {
@@ -89,6 +96,8 @@ $zindex: base, map-container, map-gradient, map-fullscreen-toggle,
     }
     label {
       cursor: pointer;
+      display: flex;
+      justify-content: center;
       &.label-open {
         align-items: flex-start;
         display: flex;
@@ -253,6 +262,7 @@ $zindex: base, map-container, map-gradient, map-fullscreen-toggle,
   .datetimepicker-select-container {
     position: relative;
     height: 40px;
+    width: 100%;
     // use global scope because react-select is not quite compatible with csss module local scoping
     :global .datetimepicker-select__control {
       cursor: inherit;
diff --git a/digitransit-component/packages/digitransit-component-datetimepicker/src/index.js b/digitransit-component/packages/digitransit-component-datetimepicker/src/index.js
index 95417481f0..7e599d8f51 100644
--- a/digitransit-component/packages/digitransit-component-datetimepicker/src/index.js
+++ b/digitransit-component/packages/digitransit-component-datetimepicker/src/index.js
@@ -60,6 +60,7 @@ function DatetimepickerStateContainer({
   onOpen,
   onClose,
   openPicker,
+  isAlwaysOpen = false,
 }) {
   moment.locale(lang);
   moment.tz.setDefault(timeZone);
@@ -185,6 +186,7 @@ function DatetimepickerStateContainer({
       onOpen={onOpen}
       onClose={onClose}
       openPicker={openPicker}
+      isAlwaysOpen={isAlwaysOpen}
     />
   );
 }
@@ -210,6 +212,7 @@ DatetimepickerStateContainer.propTypes = {
   onOpen: PropTypes.func,
   onClose: PropTypes.func,
   openPicker: PropTypes.bool,
+  isAlwaysOpen: PropTypes.bool,
 };
 
 DatetimepickerStateContainer.defaultProps = {
@@ -227,6 +230,7 @@ DatetimepickerStateContainer.defaultProps = {
   onOpen: null,
   onClose: null,
   openPicker: undefined,
+  isAlwaysOpen: false,
 };
 
 export default DatetimepickerStateContainer;