diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8b74416101..8b50bafb93 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
   3. [#564](https://github.com/influxdata/chronograf/issues/564): Add RabbitMQ pre-canned layout.
   4. [#706](https://github.com/influxdata/chronograf/issues/706): Alerts on threshold where value is inside of range
   5. [#707](https://github.com/influxdata/chronograf/issues/707): Alerts on threshold where value is outside of range
+  6. [#766](https://github.com/influxdata/chronograf/pull/766): Add click-to-insert functionality to rule message templates
 
 ## v1.1.0-beta5 [2017-01-05]
 
diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js
index 5f188a1462..a2808f2dad 100644
--- a/ui/src/kapacitor/components/RuleMessage.js
+++ b/ui/src/kapacitor/components/RuleMessage.js
@@ -1,14 +1,22 @@
 import React, {PropTypes} from 'react';
 import Dropdown from 'shared/components/Dropdown';
 import ReactTooltip from 'react-tooltip';
+import {RULE_MESSAGE_TEMPLATES as templates} from '../constants/index.js';
+
+const {
+  arrayOf,
+  func,
+  shape,
+  string,
+} = PropTypes;
 
 export const RuleMessage = React.createClass({
   propTypes: {
-    rule: PropTypes.shape({}).isRequired,
-    actions: PropTypes.shape({
-      updateMessage: PropTypes.func.isRequired,
+    rule: shape({}).isRequired,
+    actions: shape({
+      updateMessage: func.isRequired,
     }).isRequired,
-    enabledAlerts: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
+    enabledAlerts: arrayOf(string.isRequired).isRequired,
   },
 
   handleChangeMessage() {
@@ -35,19 +43,23 @@ export const RuleMessage = React.createClass({
             className="alert-message"
             ref={(r) => this.message = r}
             onChange={() => actions.updateMessage(rule.id, this.message.value)}
-            placeholder="Compose your alert message here"
+            placeholder='Example: {{ .ID }} is {{ .Level }} value: {{ index .Fields "value" }}'
             value={rule.message}
           />
+
           <div className="alert-message--formatting">
             <p>Templates:</p>
-            <code data-tip="The ID of the alert">&#123;&#123;.ID&#125;&#125;</code>
-            <code data-tip="Measurement name">&#123;&#123;.Name&#125;&#125;</code>
-            <code data-tip="The name of the task">&#123;&#123;.TaskName&#125;&#125;</code>
-            <code data-tip="Concatenation of all group-by tags of the form <code>&#91;key=value,&#93;+</code>. If no groupBy is performed equal to literal &quot;nil&quot;">&#123;&#123;.Group&#125;&#125;</code>
-            <code data-tip="Map of tags. Use <code>&#123;&#123; index .Tags &quot;key&quot; &#125;&#125;</code> to get a specific tag value">&#123;&#123;.Tags&#125;&#125;</code>
-            <code data-tip="Alert Level, one of: <code>INFO</code><code>WARNING</code><code>CRITICAL</code>">&#123;&#123;.Level&#125;&#125;</code>
-            <code data-tip="Map of fields. Use <code>&#123;&#123; index .Fields &quot;key&quot; &#125;&#125;</code> to get a specific field value">&#123;&#123;.Fields&#125;&#125;</code>
-            <code data-tip="The time of the point that triggered the event">&#123;&#123;.Time&#125;&#125;</code>
+            {
+              Object.keys(templates).map(t => {
+                return (
+                <CodeData
+                  key={t}
+                  template={templates[t]}
+                  onClickTemplate={() => actions.updateMessage(rule.id, `${this.message.value} ${templates[t].label}`)}
+                />
+                );
+              })
+            }
             <ReactTooltip effect="solid" html={true} offset={{top: -4}} class="influx-tooltip kapacitor-tooltip" />
           </div>
           <div className="rule-section--item bottom alert-message--endpoint">
@@ -59,4 +71,24 @@ export const RuleMessage = React.createClass({
     );
   },
 });
+
+const CodeData = React.createClass({
+  propTypes: {
+    onClickTemplate: func,
+    template: shape({
+      label: string,
+      text: string,
+    }),
+  },
+
+  render() {
+    const {onClickTemplate, template} = this.props;
+    const {label, text} = template;
+
+    return (
+      <code data-tip={text} onClick={onClickTemplate}>{label}</code>
+    );
+  },
+});
+
 export default RuleMessage;
diff --git a/ui/src/kapacitor/constants/index.js b/ui/src/kapacitor/constants/index.js
index cdf11f58e3..4380acef1a 100644
--- a/ui/src/kapacitor/constants/index.js
+++ b/ui/src/kapacitor/constants/index.js
@@ -25,3 +25,14 @@ export const SHIFTS = ['1m', '5m', '10m', '30m', '1h', '2h', '24h'];
 export const ALERTS = ['hipchat', 'opsgenie', 'pagerduty', 'sensu', 'slack', 'smtp', 'talk', 'telegram', 'victorops'];
 
 export const DEFAULT_RULE_ID = 'DEFAULT_RULE_ID';
+
+export const RULE_MESSAGE_TEMPLATES = {
+  id: {label: "{{.ID}}", text: "The ID of the alert"},
+  name: {label: "{{.Name}}", text: "Measurement name"},
+  taskName: {label: "{{.TaskName}}", text: "The name of the task"},
+  group: {label: "{{.Group}}", text: "Concatenation of all group-by tags of the form <code>&#91;key=value,&#93;+</code>. If no groupBy is performed equal to literal &quot;nil&quot;"},
+  tags: {label: "{{.Tags}}", text: "Map of tags. Use <code>&#123;&#123; index .Tags &quot;key&quot; &#125;&#125;</code> to get a specific tag value"},
+  level: {label: "{{.Level}}", text: "Alert Level, one of: <code>INFO</code><code>WARNING</code><code>CRITICAL</code>"},
+  fields: {label: "{{.Fields}}", text: "Map of fields. Use <code>&#123;&#123; index .Fields &quot;key&quot; &#125;&#125;</code> to get a specific field value"},
+  time: {label: "{{.Time}}", text: "The time of the point that triggered the event"},
+};
\ No newline at end of file
diff --git a/ui/src/shared/constants/index.js b/ui/src/shared/constants/index.js
index aab4118e46..1637e65204 100644
--- a/ui/src/shared/constants/index.js
+++ b/ui/src/shared/constants/index.js
@@ -466,4 +466,4 @@ export const DEFAULT_LINE_COLORS = [
 export const STROKE_WIDTH = {
   heavy: 3.5,
   light: 1.5,
-};
+};
\ No newline at end of file
diff --git a/ui/src/style/pages/kapacitor.scss b/ui/src/style/pages/kapacitor.scss
index 9009cc45ca..3133a498a7 100644
--- a/ui/src/style/pages/kapacitor.scss
+++ b/ui/src/style/pages/kapacitor.scss
@@ -389,7 +389,7 @@ div.qeditor.kapacitor-metric-selector {
 
   > p {
     margin-right: $kap-padding-sm !important;
-  } 
+  }
 }
 .alert-message--formatting {
   padding: ($kap-padding-sm - 2px) $kap-padding-lg;