diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
index 9654bd03c..a0f19d8af 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -6,7 +6,7 @@
       @click="insertMentionNode"
     />
     <canned-response
-      v-if="showCannedMenu && !isPrivate"
+      v-if="shouldShowCannedResponses"
       :search-key="cannedSearchTerm"
       @click="insertCannedResponse"
     />
@@ -80,7 +80,8 @@ export default {
     enableSuggestions: { type: Boolean, default: true },
     overrideLineBreaks: { type: Boolean, default: false },
     updateSelectionWith: { type: String, default: '' },
-    enableVariables: { type: Boolean, default: true },
+    enableVariables: { type: Boolean, default: false },
+    enableCannedResponses: { type: Boolean, default: true },
   },
   data() {
     return {
@@ -104,6 +105,11 @@ export default {
     shouldShowVariables() {
       return this.enableVariables && this.showVariables && !this.isPrivate;
     },
+    shouldShowCannedResponses() {
+      return (
+        this.enableCannedResponses && this.showCannedMenu && !this.isPrivate
+      );
+    },
     plugins() {
       if (!this.enableSuggestions) {
         return [];
diff --git a/app/javascript/dashboard/helper/messageHelper.js b/app/javascript/dashboard/helper/messageHelper.js
new file mode 100644
index 000000000..ca4821827
--- /dev/null
+++ b/app/javascript/dashboard/helper/messageHelper.js
@@ -0,0 +1,8 @@
+export const findReplaceMessageVariables = ({ message, replacementList }) => {
+  const regex = /{{(.*?)}}/g;
+  return message.replace(regex, (match, replace) => {
+    return replacementList[replace.trim()]
+      ? replacementList[replace.trim().toLowerCase()]
+      : '';
+  });
+};
diff --git a/app/javascript/dashboard/helper/specs/messageHelper.spec.js b/app/javascript/dashboard/helper/specs/messageHelper.spec.js
new file mode 100644
index 000000000..2c7c4d4af
--- /dev/null
+++ b/app/javascript/dashboard/helper/specs/messageHelper.spec.js
@@ -0,0 +1,49 @@
+import { findReplaceMessageVariables } from '../messageHelper';
+
+const replacementList = {
+  'contact.name': 'John',
+  'contact.email': 'john.p@example.com',
+  'contact.phone': '1234567890',
+  'conversation.id': 1,
+  'agent.name': 'Samuel',
+  'agent.email': 'samuel@gmail.com',
+};
+
+describe('#findReplaceMessageVariables', () => {
+  it('returns the message with variable name', () => {
+    const message = 'hey {{contact.name}} how may I help you?';
+    expect(findReplaceMessageVariables({ message, replacementList })).toBe(
+      'hey John how may I help you?'
+    );
+  });
+
+  it('returns the message with variable name having white space', () => {
+    const message = 'hey {{contact.name}} how may I help you?';
+    expect(findReplaceMessageVariables({ message, replacementList })).toBe(
+      'hey John how may I help you?'
+    );
+  });
+
+  it('returns the message with variable email', () => {
+    const message =
+      'No issues. We will send the reset instructions to your email at {{contact.email}}';
+    expect(findReplaceMessageVariables({ message, replacementList })).toBe(
+      'No issues. We will send the reset instructions to your email at john.p@example.com'
+    );
+  });
+
+  it('returns the message with multiple variables', () => {
+    const message =
+      'hey {{ contact.name }}, no issues. We will send the reset instructions to your email at {{contact.email}}';
+    expect(findReplaceMessageVariables({ message, replacementList })).toBe(
+      'hey John, no issues. We will send the reset instructions to your email at john.p@example.com'
+    );
+  });
+
+  it('returns the message if the variable is not present in replacementList', () => {
+    const message = 'Please dm me at {{contact.twitter}}';
+    expect(findReplaceMessageVariables({ message, replacementList })).toBe(
+      'Please dm me at '
+    );
+  });
+});
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
index ea0ca4b01..47b69ff8b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
@@ -21,13 +21,17 @@
         <div class="medium-12 columns">
           <label :class="{ error: $v.content.$error }">
             {{ $t('CANNED_MGMT.ADD.FORM.CONTENT.LABEL') }}
-            <textarea
-              v-model.trim="content"
-              rows="5"
-              type="text"
-              :placeholder="$t('CANNED_MGMT.ADD.FORM.CONTENT.PLACEHOLDER')"
-              @input="$v.content.$touch"
-            />
+            <label class="editor-wrap">
+              <woot-message-editor
+                v-model="content"
+                class="message-editor"
+                :class="{ editor_warning: $v.content.$error }"
+                :enable-variables="true"
+                :enable-canned-responses="false"
+                :placeholder="$t('CANNED_MGMT.ADD.FORM.CONTENT.PLACEHOLDER')"
+                @blur="$v.content.$touch"
+              />
+            </label>
           </label>
         </div>
         <div class="modal-footer">
@@ -56,12 +60,14 @@ import { required, minLength } from 'vuelidate/lib/validators';
 
 import WootSubmitButton from '../../../../components/buttons/FormSubmitButton';
 import Modal from '../../../../components/Modal';
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
 import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   components: {
     WootSubmitButton,
     Modal,
+    WootMessageEditor,
   },
   mixins: [alertMixin],
   props: {
@@ -125,3 +131,15 @@ export default {
   },
 };
 </script>
+
+<style scoped lang="scss">
+::v-deep .mention--box {
+  border-left: 1px solid var(--color-border);
+  border-right: 1px solid var(--color-border);
+  left: 0;
+  margin: auto;
+  right: 0;
+  top: 17rem !important;
+  width: 90%;
+}
+</style>