diff --git a/src/contentScripts/communityConsole/main.js b/src/contentScripts/communityConsole/main.js
index 964a647..e5d9af3 100644
--- a/src/contentScripts/communityConsole/main.js
+++ b/src/contentScripts/communityConsole/main.js
@@ -53,7 +53,8 @@
   // Unified profile iframe
   'iframe',
 
-  // Canned response tags or toolbelt (for the extra info feature)
+  // Canned response tags or toolbelt (for the extra info feature and the
+  // "import CR" popup for the workflows feature)
   'ec-canned-response-row .tags',
   'ec-canned-response-row .main .toolbelt',
 
@@ -170,9 +171,11 @@
       unifiedProfilesFix.fixIframe(node);
     }
 
-    // Show additional details in the canned responses view.
+    // Show additional details in the canned responses view (and add the
+    // "import" button if applicable for the workflows feature).
     if (node.matches('ec-canned-response-row .tags')) {
       window.TWPTExtraInfo.injectAtCRIfEnabled(node, /* isExpanded = */ false);
+      window.TWPTWorkflowsImport.addButtonIfEnabled(node);
     }
     if (node.matches('ec-canned-response-row .main .toolbelt')) {
       const tags = node.parentNode?.querySelector?.('.tags');
@@ -236,8 +239,8 @@
   infiniteScroll = new InfiniteScroll();
   workflows = new Workflows();
 
-  // autoRefresh, extraInfo and threadPageDesignWarning are initialized in
-  // start.js
+  // autoRefresh, extraInfo, threadPageDesignWarning and workflowsImport are
+  // initialized in start.js
 
   // Before starting the mutation Observer, check whether we missed any
   // mutations by manually checking whether some watched nodes already
diff --git a/src/contentScripts/communityConsole/start.js b/src/contentScripts/communityConsole/start.js
index f0c43d8..b3417fe 100644
--- a/src/contentScripts/communityConsole/start.js
+++ b/src/contentScripts/communityConsole/start.js
@@ -4,6 +4,7 @@
 import AutoRefresh from './autoRefresh.js';
 import ExtraInfo from './extraInfo.js';
 import ThreadPageDesignWarning from './threadPageDesignWarning.js';
+import WorkflowsImport from './workflows/import.js';
 
 const SMEI_NESTED_REPLIES = 15;
 const SMEI_RCE_THREAD_INTEROP = 22;
@@ -50,6 +51,7 @@
   window.TWPTAutoRefresh = new AutoRefresh();
   window.TWPTExtraInfo = new ExtraInfo();
   window.TWPTThreadPageDesignWarning = new ThreadPageDesignWarning();
+  window.TWPTWorkflowsImport = new WorkflowsImport();
 
   if (options.ccdarktheme) {
     switch (options.ccdarktheme_mode) {
diff --git a/src/contentScripts/communityConsole/workflows/components/TwptCRImportButton.js b/src/contentScripts/communityConsole/workflows/components/TwptCRImportButton.js
new file mode 100644
index 0000000..935926f
--- /dev/null
+++ b/src/contentScripts/communityConsole/workflows/components/TwptCRImportButton.js
@@ -0,0 +1,40 @@
+import '@material/web/button/outlined-button.js';
+
+import {html, LitElement} from 'lit';
+
+import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js';
+
+export default class TwptCRImportButton extends LitElement {
+  static properties = {
+    cannedResponseId: {type: String},
+    selected: {type: Boolean},
+  };
+
+  static styles = [
+    SHARED_MD3_STYLES,
+  ];
+
+  render() {
+    const icon = this.selected ? 'done' : 'post_add';
+    const label = this.selected ? 'Selected' : 'Select';
+
+    return html`
+      <md-outlined-button
+          icon=${icon}
+          label=${label}
+          ?disabled=${this.selected}
+          @click=${this._importCR}>
+      </md-outlined-button>
+    `;
+  }
+
+  _importCR() {
+    window.opener?.postMessage?.(
+        {
+          action: 'importCannedResponse',
+          cannedResponseId: this.cannedResponseId,
+        },
+        '*');
+  }
+}
+window.customElements.define('twpt-cr-import-button', TwptCRImportButton);
diff --git a/src/contentScripts/communityConsole/workflows/components/index.js b/src/contentScripts/communityConsole/workflows/components/index.js
index 05cf839..f7651f0 100644
--- a/src/contentScripts/communityConsole/workflows/components/index.js
+++ b/src/contentScripts/communityConsole/workflows/components/index.js
@@ -1,4 +1,5 @@
 import './TwptConfirmDialog.js';
+import './TwptCRImportButton.js';
 import './TwptWorkflowDialog.js';
 import './TwptWorkflowsMenu.js';
 
@@ -53,7 +54,8 @@
   }
 
   _startWorkflow() {
-    this.workflowDialogRef.value.workflow = this._selectedWorkflow.cloneMessage();
+    this.workflowDialogRef.value.workflow =
+        this._selectedWorkflow.cloneMessage();
     this.workflowDialogRef.value.start();
   }
 
diff --git a/src/contentScripts/communityConsole/workflows/import.js b/src/contentScripts/communityConsole/workflows/import.js
new file mode 100644
index 0000000..8172b62
--- /dev/null
+++ b/src/contentScripts/communityConsole/workflows/import.js
@@ -0,0 +1,108 @@
+import {waitFor} from 'poll-until-promise';
+
+import {recursiveParentElement} from '../../../common/commonUtils.js';
+import {injectStylesheet} from '../../../common/contentScriptsUtils.js';
+import {isOptionEnabled} from '../../../common/optionsUtils.js';
+
+const kListCannedResponsesResponse = 'TWPT_ListCannedResponsesResponse';
+
+const kImportParam = 'TWPTImportToWorkflow';
+const kSelectedIdParam = 'TWPTSelectedId';
+
+// Class which is used to inject a "select" button in the CRs list when loading
+// the canned response list for this purpose from the workflows manager.
+export default class WorkflowsImport {
+  constructor() {
+    // Only set this class up if the Community Console was opened with the
+    // purpose of importing CRs to the workflow manager.
+    const searchParams = new URLSearchParams(document.location.search);
+    if (!searchParams.has(kImportParam)) return;
+
+    this.selectedId = searchParams.get(kSelectedIdParam);
+
+    this.lastCRsList = {
+      body: {},
+      id: -1,
+      duplicateNames: new Set(),
+    };
+
+    this.setUpHandler();
+    this.addCustomStyles();
+  }
+
+  setUpHandler() {
+    window.addEventListener(kListCannedResponsesResponse, e => {
+      if (e.detail.id < this.lastCRsList.id) return;
+
+      // Look if there are duplicate names
+      const crs = e.detail.body?.['1'] ?? [];
+      const names = crs.map(cr => cr?.['7']).slice().sort();
+      let duplicateNames = new Set();
+      for (let i = 1; i < names.length; i++)
+        if (names[i - 1] == names[i]) duplicateNames.add(names[i]);
+
+      this.lastCRsList = {
+        body: e.detail.body,
+        id: e.detail.id,
+        duplicateNames,
+      };
+    });
+  }
+
+  addCustomStyles() {
+    injectStylesheet(chrome.runtime.getURL('css/workflow_import.css'));
+  }
+
+  addButton(tags) {
+    const cr = recursiveParentElement(tags, 'EC-CANNED-RESPONSE-ROW');
+    if (!cr) return;
+
+    const name = cr.querySelector('.text .name').textContent;
+    if (!name) return;
+
+    const toolbar = cr.querySelector('.action .toolbar');
+    if (!toolbar) return console.error(`Can't find toolbar.`);
+
+    // If it has already been injected, exit.
+    if (toolbar.querySelector('twpt-cr-import-button')) return;
+
+    waitFor(() => {
+      if (this.lastCRsList.id != -1) return Promise.resolve(this.lastCRsList);
+      return Promise.reject(new Error('Didn\'t receive canned responses list'));
+    }, {
+      interval: 500,
+      timeout: 15 * 1000,
+    }).then(crs => {
+      // If another CR has the same name, there's no easy way to distinguish
+      // them, so don't inject the button.
+      if (crs.duplicateNames.has(name)) {
+        console.info(
+            'CR "' + name +
+            '" is duplicate, so skipping the injection of the button.');
+        return;
+      }
+
+      for (const cr of (crs.body?.[1] ?? [])) {
+        if (cr[7] == name) {
+          const id = cr?.[1]?.[1];
+          if (!id) {
+            console.error('Can\'t find ID for canned response', cr);
+            break;
+          }
+
+          const button = document.createElement('twpt-cr-import-button');
+          button.setAttribute('cannedResponseId', id);
+          if (this.selectedId == id) button.setAttribute('selected', '');
+          toolbar.prepend(button);
+          break;
+        }
+      }
+    });
+  }
+
+  addButtonIfEnabled(tags) {
+    isOptionEnabled('workflows').then(isEnabled => {
+      if (isEnabled) this.addButton(tags);
+    });
+  }
+}
diff --git a/src/static/css/workflow_import.css b/src/static/css/workflow_import.css
new file mode 100644
index 0000000..e11c9d3
--- /dev/null
+++ b/src/static/css/workflow_import.css
@@ -0,0 +1,41 @@
+/**
+ * Styles used to hide some UI components in order to adapt the Community
+ * Console to be shown like an importer popup for the workflow manager.
+ */
+header.material-header {
+  visibility: hidden;
+}
+
+.material-content {
+  margin-top: 0!important;
+}
+
+.material-content > .scrollable-content {
+  height: 100vh!important;
+}
+
+material-drawer {
+  visibility: hidden;
+}
+
+.material-content > .scrollable-content > main.shifted-right {
+  margin-left: 32px!important;
+}
+
+ec-back-button {
+  visibility: hidden;
+}
+
+/**
+ * Don't allow creating/modifying/deleting CRs because this breaks the logic
+ * which adds the "Select" buttons.
+ */
+ec-canned-response-row .action .toolbar :is(
+    [debugid="edit-button"],
+    [debugid="delete-button"]) {
+  display: none;
+}
+
+material-fab.create-button {
+  display: none;
+}
diff --git a/src/workflows/manager/components/actions/ReplyWithCR.js b/src/workflows/manager/components/actions/ReplyWithCR.js
index 614a042..f1bdeeb 100644
--- a/src/workflows/manager/components/actions/ReplyWithCR.js
+++ b/src/workflows/manager/components/actions/ReplyWithCR.js
@@ -1,8 +1,8 @@
-import '@material/web/textfield/outlined-text-field.js';
-import '@material/web/switch/switch.js';
 import '@material/web/formfield/formfield.js';
+import '@material/web/switch/switch.js';
+import '@material/web/textfield/outlined-text-field.js';
 
-import {html, LitElement} from 'lit';
+import {css, html, LitElement} from 'lit';
 import {createRef, ref} from 'lit/directives/ref.js';
 
 import {CCApi} from '../../../../common/api.js';
@@ -12,8 +12,19 @@
   static properties = {
     action: {type: Object},
     readOnly: {type: Boolean},
+    _importerWindow: {type: Object, state: true},
   };
 
+  static styles = css`
+    .form-line {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-block: 1em;
+      gap: .5rem;
+    }
+  `;
+
   cannedResponseRef = createRef();
   subscribeRef = createRef();
   markAsAnswerRef = createRef();
@@ -21,12 +32,20 @@
   constructor() {
     super();
     this.action = new pb.workflows.Action.ReplyWithCRAction;
-    // this._loadUserCannedResponses();
+    this._importerWindow = undefined;
+
+    window.addEventListener('message', e => {
+      if (e.source === this._importerWindow &&
+          e.data?.action === 'importCannedResponse') {
+        this._cannedResponseIdString = e.data?.cannedResponseId;
+        this._importerWindow?.close?.();
+      }
+    });
   }
 
   render() {
     return html`
-      <p>
+      <div class="form-line">
         <md-outlined-text-field ${ref(this.cannedResponseRef)}
             type="number"
             label="Canned response ID"
@@ -35,44 +54,40 @@
             ?readonly=${this.readOnly}
             @input=${this._cannedResponseIdChanged}>
         </md-outlined-text-field>
-      </p>
-      <p>
+        <md-outlined-button
+            icon="more"
+            label="Select CR"
+            @click=${this._openCRImporter}>
+        </md-outlined-button>
+      </div>
+      <div class="form-line">
         <md-formfield label="Subscribe to thread">
           <md-switch ${ref(this.subscribeRef)}
               ?selected=${this.subscribe}
               ?disabled=${this.readOnly}
               @click=${this._subscribeChanged}/>
         </md-formfield>
-      </p>
-      <p>
+      </div>
+      <div class="form-line">
         <md-formfield label="Mark as answer">
           <md-switch ${ref(this.markAsAnswerRef)}
               ?selected=${this.markAsAnswer}
               ?disabled=${this.readOnly}
               @click=${this._markAsAnswerChanged}/>
         </md-formfield>
-      </p>
+      </div>
     `;
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._importerWindow?.close?.();
+  }
+
   checkValidity() {
     return this.cannedResponseRef.value.reportValidity();
   }
 
-  _loadUserCannedResponses() {
-    if (window.USER_CANNED_RESPONSES_STARTED_TO_LOAD) return;
-
-    window.USER_CANNED_RESPONSES_STARTED_TO_LOAD = true;
-    let searchParams = new URLSearchParams(document.location.search);
-    let authuser = searchParams.get('authuser') ?? 0;
-
-    // @TODO: This isn't as simple as doing this because the request contains
-    // the wrong origin and fails.
-    CCApi('ListCannedResponses', {}, true, authuser).then(res => {
-      console.log(res);
-    });
-  }
-
   _dispatchUpdateEvent() {
     // Request an update for this component
     this.requestUpdate();
@@ -95,6 +110,16 @@
     this.markAsAnswer = this.markAsAnswerRef.value.selected;
   }
 
+  _openCRImporter() {
+    if (!(this._importerWindow?.closed ?? true))
+      this._importerWindow?.close?.();
+
+    this._importerWindow = window.open(
+        'https://support.google.com/s/community/cannedresponses?TWPTImportToWorkflow&TWPTSelectedId=' +
+            encodeURIComponent(this._cannedResponseIdString),
+        '', 'popup,width=720,height=540');
+  }
+
   get cannedResponseId() {
     return this.action.getCannedResponseId() ?? 0;
   }
diff --git a/templates/manifest.gjson b/templates/manifest.gjson
index 1a23c85..41d39e2 100644
--- a/templates/manifest.gjson
+++ b/templates/manifest.gjson
@@ -96,6 +96,7 @@
         "css/image_max_height.css",
         "css/extrainfo.css",
         "css/extrainfo_perforumstats.css",
+        "css/workflow_import.css",
         "css/ui_spacing/shared.css",
         "css/ui_spacing/console.css",
         "css/ui_spacing/twbasic.css",