diff --git a/awx/ui/client/src/templates/job_templates/edit-job-template/job-template-edit.controller.js b/awx/ui/client/src/templates/job_templates/edit-job-template/job-template-edit.controller.js
index f2bcad5fb8..435a938a51 100644
--- a/awx/ui/client/src/templates/job_templates/edit-job-template/job-template-edit.controller.js
+++ b/awx/ui/client/src/templates/job_templates/edit-job-template/job-template-edit.controller.js
@@ -195,6 +195,7 @@ export default
                         $scope.webhook_url = `${$scope.callback_server_path}${jobTemplateData.url}${newServiceValue}`;
                     } else {
                         $scope.webhook_url = '';
+                        $scope.webhook_key = '';
                     }
                     if (newServiceValue !== oldServiceValue || newServiceValue === newValue) {
                         $scope.webhook_service = { value: newServiceValue };
@@ -355,7 +356,6 @@ export default
             }
 
             function jobTemplateLoadFinished(){
-                //$scope.webhook_service = jobTemplateData.webhook_service;
                 select2LoadDefer.push(CreateSelect2({
                     element:'#job_template_job_type',
                     multiple: false
diff --git a/awx/ui/client/src/templates/job_templates/job-template.form.js b/awx/ui/client/src/templates/job_templates/job-template.form.js
index 2c1c11667e..7a87f99a56 100644
--- a/awx/ui/client/src/templates/job_templates/job-template.form.js
+++ b/awx/ui/client/src/templates/job_templates/job-template.form.js
@@ -433,7 +433,7 @@ function(NotificationsList, i18n) {
                     genHash: true,
                     genHashButtonTemplate: `
                         <span
-                            ng-if="job_template_obj && currentlySavedWebhookKey === webhook_key"
+                            ng-if="job_template_obj && webhook_service.value && currentlySavedWebhookKey === webhook_key"
                             class="input-group-btn input-group-prepend"
                         >
                             <button
@@ -472,7 +472,7 @@ function(NotificationsList, i18n) {
                     dataTitle: i18n._('Webhook Credential'),
                     dataPlacement: 'right',
                     dataContainer: "body",
-                    ngDisabled: '!(webhook_key || webhook_key.value)',
+                    ngDisabled: '!(webhook_service || webhook_service.value)',
                     required: false,
                 },
                 extra_vars: {
diff --git a/awx/ui/client/src/templates/main.js b/awx/ui/client/src/templates/main.js
index 08b6ee30f4..c6bfa06dd8 100644
--- a/awx/ui/client/src/templates/main.js
+++ b/awx/ui/client/src/templates/main.js
@@ -471,7 +471,21 @@ angular.module('templates', [surveyMaker.name, jobTemplates.name, labels.name, p
                                                 msg: i18n._('Failed to get organizations for which this user is a notification administrator. GET returned ') + status
                                             });
                                     });
-                            }]
+                            }],
+                            webhookKey: ['Rest', 'ProcessErrors', 'workflowJobTemplateData', 'i18n',
+                                function(Rest, ProcessErrors, workflowJobTemplateData, i18n) {
+                                    Rest.setUrl(workflowJobTemplateData.related.webhook_key);
+                                    return Rest.get()
+                                        .then(({ data = {} }) => {
+                                            return data.webhook_key || '';
+                                        })
+                                        .catch(({data, status}) => {
+                                            ProcessErrors(null, data, status, null, {
+                                                hdr: i18n._('Error!'),
+                                                msg: i18n._('Failed to get webhook key GET returned ') + status
+                                            });
+                                    });
+                            }],
                         }
                     }
                 });
diff --git a/awx/ui/client/src/templates/workflows.form.js b/awx/ui/client/src/templates/workflows.form.js
index 9124233c71..e86ccada6d 100644
--- a/awx/ui/client/src/templates/workflows.form.js
+++ b/awx/ui/client/src/templates/workflows.form.js
@@ -162,8 +162,92 @@ export default ['NotificationsList', 'i18n', function(NotificationsList, i18n) {
                         dataTitle: i18n._('Enable Concurrent Jobs'),
                         dataContainer: "body",
                         ngDisabled: '!(workflow_job_template_obj.summary_fields.user_capabilities.edit || canAddOrEdit)'
+                    }, {
+                        name: 'enable_webhook',
+                        label: i18n._('Webhooks'),
+                        type: 'checkbox',
+                        column: 2,
+                        awPopOver: "<p>" + i18n._("Enabled webhook for this workflow job template.") + "</p>",
+                        dataPlacement: 'right',
+                        dataTitle: i18n._('Enable Webhook'),
+                        dataContainer: "body",
+                        ngDisabled: '!(workflow_job_template_obj.summary_fields.user_capabilities.edit || canAddOrEdit)'
                     }]
-                }
+                },
+                webhook_service: {
+                    label: i18n._('Webhook Service'),
+                    type:'select',
+                    defaultText: i18n._('Choose a Webhook Service'),
+                    ngOptions: 'svc.label for svc in webhook_service_options track by svc.value',
+                    ngShow: "enable_webhook  && enable_webhook !== 'false'",
+                    ngDisabled: "!(workflow_job_template_obj.summary_fields.user_capabilities.edit || canAddOrEdit)",
+                    id: 'webhook-service-select',
+                    column: 1,
+                    awPopOver: "<p>" + i18n._("Select a webhook service.") + "</p>",
+                    dataTitle: i18n._('Webhook Service'),
+                    dataPlacement: 'right',
+                    dataContainer: "body",
+                },
+                webhook_url: {
+                    label: i18n._('Webhook URL'),
+                    type: 'text',
+                    ngShow: "workflow_job_template_obj && enable_webhook && enable_webhook !== 'false'",
+                    awPopOver: "webhook_url_help",
+                    awPopOverWatch: "webhook_url_help",
+                    dataPlacement: 'top',
+                    dataTitle: i18n._('Webhook URL'),
+                    dataContainer: "body",
+                    readonly: true
+                },
+                webhook_key: {
+                    label: i18n._('Webhook Key'),
+                    type: 'text',
+                    ngShow: "enable_webhook && enable_webhook !== 'false'",
+                    genHash: true,
+                    genHashButtonTemplate: `
+                        <span
+                            ng-if="workflow_job_template_obj && webhook_service.value && currentlySavedWebhookKey === webhook_key"
+                            class="input-group-btn input-group-prepend"
+                        >
+                            <button
+                                type="button"
+                                class="btn Form-lookupButton"
+                                ng-click="handleWebhookKeyButtonClick()"
+                                aw-tool-tip="${i18n._('Rotate Webhook Key')}"
+                                data-placement="top"
+                                id="workflow_job_template_webhook_key_gen_btn"
+                            >
+                                <i class="fa fa-refresh" />
+                            </button>
+                        </span>
+                    `,
+                    genHashButtonClickHandlerName: "handleWebhookKeyButtonClick",
+                    awPopOver: "webhook_key_help",
+                    awPopOverWatch: "webhook_key_help",
+                    dataPlacement: 'right',
+                    dataTitle: i18n._("Webhook Key"),
+                    dataContainer: "body",
+                    readonly: true,
+                    required: false,
+                },
+                webhook_credential: {
+                    label: i18n._('Webhook Credential'),
+                    type: 'custom',
+                    ngShow: "enable_webhook  && enable_webhook !== 'false'",
+                    control: `
+                        <webhook-credential-input
+                            is-field-disabled="!(workflow_job_template_obj.summary_fields.user_capabilities.edit || canAddOrEdit) || !(webhookCredential.modalBaseParams.credential_type__namespace)"
+                            tag-name="webhookCredential.name"
+                            on-lookup-click="handleWebhookCredentialLookupClick"
+                            on-tag-delete="handleWebhookCredentialTagDelete"
+                        </webhook-credential-input>`,
+                    awPopOver: "<p>" + i18n._("Select the credential to use with the webhook service.") + "</p>",
+                    dataTitle: i18n._('Webhook Credential'),
+                    dataPlacement: 'right',
+                    dataContainer: "body",
+                    ngDisabled: '!webhook_service.value',
+                    required: false,
+                },
             },
 
             buttons: { //for now always generates <button> tags
diff --git a/awx/ui/client/src/templates/workflows/add-workflow/workflow-add.controller.js b/awx/ui/client/src/templates/workflows/add-workflow/workflow-add.controller.js
index 5dcb050dfb..fcd97a1338 100644
--- a/awx/ui/client/src/templates/workflows/add-workflow/workflow-add.controller.js
+++ b/awx/ui/client/src/templates/workflows/add-workflow/workflow-add.controller.js
@@ -8,11 +8,11 @@ export default [
     '$scope', 'WorkflowForm', 'GenerateForm', 'Alert', 'ProcessErrors',
     'Wait', '$state', 'CreateSelect2', 'TemplatesService',
     'ToJSON', 'ParseTypeChange', '$q', 'Rest', 'GetBasePath', 'availableLabels', 'i18n',
-    'resolvedModels',
+    'resolvedModels', 'GetChoices', '$compile',
     function($scope, WorkflowForm, GenerateForm, Alert, ProcessErrors,
     Wait, $state, CreateSelect2, TemplatesService, ToJSON,
     ParseTypeChange, $q, Rest, GetBasePath, availableLabels, i18n,
-    resolvedModels) {
+    resolvedModels, GetChoices, $compile) {
 
          // Inject dynamic view
          let form = WorkflowForm(),
@@ -52,6 +52,138 @@ export default [
          $scope.workflowEditorTooltip = i18n._("Please save before defining the workflow graph.");
          $scope.surveyTooltip = i18n._('Please save before adding a survey to this workflow.');
 
+        $scope.webhook_service_options = null;
+
+        // populate webhook service choices
+        GetChoices({
+            scope: $scope,
+            url: GetBasePath('workflow_job_templates'),
+            field: 'webhook_service',
+            variable: 'webhook_service_options',
+        });
+
+        // set initial val for webhook checkbox
+        $scope.enable_webhook = false;
+
+        //
+        // webhook credential - all handlers, dynamic state, etc. live here
+        //
+
+        $scope.webhookCredential = {
+            id: null,
+            name: null,
+            isModalOpen: false,
+            isModalReady: false,
+            modalSelectedId: null,
+            modalSelectedName: null,
+            modalBaseParams: {
+                order_by: 'name',
+                page_size: 5,
+                credential_type__namespace: null,
+            },
+            modalTitle: i18n._('Select Webhook Credential'),
+        };
+
+        $scope.handleWebhookCredentialLookupClick = () => {
+            $scope.webhookCredential.modalSelectedId = $scope.webhookCredential.id;
+            $scope.webhookCredential.isModalOpen = true;
+        };
+
+        $scope.handleWebhookCredentialTagDelete = () => {
+            $scope.webhookCredential.id = null;
+            $scope.webhookCredential.name = null;
+        };
+
+        $scope.handleWebhookCredentialModalClose = () => {
+            $scope.webhookCredential.isModalOpen = false;
+            $scope.webhookCredential.isModalReady = false;
+        };
+
+        $scope.handleWebhookCredentialModalReady = () => {
+            $scope.webhookCredential.isModalReady = true;
+        };
+
+        $scope.handleWebhookCredentialModalItemSelect = (item) => {
+            $scope.webhookCredential.modalSelectedId = item.id;
+            $scope.webhookCredential.modalSelectedName = item.name;
+        };
+
+        $scope.handleWebhookCredentialModalCancel = () => {
+            $scope.webhookCredential.isModalOpen = false;
+            $scope.webhookCredential.isModalReady = false;
+            $scope.webhookCredential.modalSelectedId = null;
+            $scope.webhookCredential.modalSelectedName = null;
+        };
+
+        $scope.handleWebhookCredentialSelect = () => {
+            $scope.webhookCredential.isModalOpen = false;
+            $scope.webhookCredential.isModalReady = false;
+            $scope.webhookCredential.id = $scope.webhookCredential.modalSelectedId;
+            $scope.webhookCredential.name = $scope.webhookCredential.modalSelectedName;
+            $scope.webhookCredential.modalSelectedId = null;
+            $scope.webhookCredential.modalSelectedName = null;
+        };
+
+        $scope.handleWebhookKeyButtonClick = () => {};
+
+        $('#content-container').append($compile(`
+            <at-dialog
+                title="webhookCredential.modalTitle"
+                on-close="handleWebhookCredentialModalClose"
+                ng-if="webhookCredential.isModalOpen"
+                ng-show="webhookCredential.isModalOpen && webhookCredential.isModalReady"
+            >
+                <at-lookup-list
+                    ng-show="webhookCredential.isModalOpen && webhookCredential.isModalReady"
+                    resource-name="credential"
+                    base-params="webhookCredential.modalBaseParams"
+                    selected-id="webhookCredential.modalSelectedId"
+                    on-ready="handleWebhookCredentialModalReady"
+                    on-item-select="handleWebhookCredentialModalItemSelect"
+                />
+                <at-action-group col="12" pos="right">
+                    <at-action-button
+                        variant="tertiary"
+                        ng-click="handleWebhookCredentialModalCancel()"
+                    >
+                        ${i18n._('CANCEL')}
+                    </at-action-button>
+                    <at-action-button
+                        variant="primary"
+                        ng-click="handleWebhookCredentialSelect()"
+                    >
+                        ${i18n._('SELECT')}
+                    </at-action-button>
+                </at-action-group>
+            </at-dialog>`)($scope));
+
+        $scope.$watch('webhook_service', (newValue, oldValue) => {
+            const newServiceValue = newValue && typeof newValue === 'object' ? newValue.value : newValue;
+            const oldServiceValue = oldValue && typeof oldValue === 'object' ? oldValue.value : oldValue;
+            if (newServiceValue !== oldServiceValue || newServiceValue === newValue) {
+                $scope.webhook_service = { value: newServiceValue };
+                sync_webhook_service_select2();
+                $scope.webhookCredential.modalBaseParams.credential_type__namespace = newServiceValue ?
+                    `${newServiceValue}_token`
+                    : null;
+                if (newServiceValue !== newValue || newValue === null) {
+                    $scope.webhookCredential.id = null;
+                    $scope.webhookCredential.name = null;
+                }
+            }
+        });
+
+        function sync_webhook_service_select2() {
+            CreateSelect2({
+                element:'#webhook-service-select',
+                addNew: false,
+                multiple: false,
+                scope: $scope,
+                options: 'webhook_service_options',
+                model: 'webhook_service'
+            });
+        }
+
          $scope.formSave = function () {
              let fld, data = {};
 
@@ -98,6 +230,25 @@ export default [
                      .filter("[data-label-is-present=true]")
                      .map((i, val) => ({name: $(val).text()}));
 
+
+                delete data.webhook_url;
+                delete data.webhook_key;
+                delete data.enable_webhook;
+                data.webhook_credential = $scope.webhookCredential.id;
+
+                if (!data.webhook_service) {
+                    data.webhook_credential = null;
+                }
+
+                if (!$scope.enable_webhook) {
+                    data.webhook_service = '';
+                    data.webhook_credential = null;
+                }
+
+                if (data.webhook_service && typeof data.webhook_service === 'object') {
+                    data.webhook_service = data.webhook_service.value;
+                }
+
                  TemplatesService.createWorkflowJobTemplate(data)
                      .then(function(data) {
 
diff --git a/awx/ui/client/src/templates/workflows/edit-workflow/workflow-edit.controller.js b/awx/ui/client/src/templates/workflows/edit-workflow/workflow-edit.controller.js
index d5882ddcdd..be92706f4d 100644
--- a/awx/ui/client/src/templates/workflows/edit-workflow/workflow-edit.controller.js
+++ b/awx/ui/client/src/templates/workflows/edit-workflow/workflow-edit.controller.js
@@ -10,12 +10,12 @@ export default [
     'Wait', 'Empty', 'ToJSON', 'initSurvey', '$state', 'CreateSelect2',
     'ParseVariableString', 'TemplatesService', 'Rest', 'ToggleNotification',
     'OrgAdminLookup', 'availableLabels', 'selectedLabels', 'workflowJobTemplateData', 'i18n',
-    'workflowLaunch', '$transitions', 'WorkflowJobTemplateModel', 'Inventory', 'isNotificationAdmin',
+    'workflowLaunch', '$transitions', 'WorkflowJobTemplateModel', 'Inventory', 'isNotificationAdmin', 'webhookKey', '$compile', '$location', 'GetChoices',
     function($scope, $stateParams, WorkflowForm, GenerateForm, Alert,
         ProcessErrors, GetBasePath, $q, ParseTypeChange, Wait, Empty,
         ToJSON, SurveyControllerInit, $state, CreateSelect2, ParseVariableString,
         TemplatesService, Rest, ToggleNotification, OrgAdminLookup, availableLabels, selectedLabels, workflowJobTemplateData, i18n,
-        workflowLaunch, $transitions, WorkflowJobTemplate, Inventory, isNotificationAdmin
+        workflowLaunch, $transitions, WorkflowJobTemplate, Inventory, isNotificationAdmin, webhookKey, $compile, $location, GetChoices
     ) {
 
         // To toggle notifications a user needs to have a read role on the WFJT
@@ -63,6 +63,179 @@ export default [
             $scope.inventory_name = Inventory.name;
         }
 
+        $scope.webhook_service_options = null;
+        $scope.webhook_service = workflowJobTemplateData.webhook_service;
+        $scope.webhook_url = '';
+        $scope.webhook_url_help = i18n._('Webhook services can launch jobs with this job template by making a POST request to this URL.');
+        $scope.webhook_key_help = i18n._('Webhook services can use this as a shared secret.');
+        $scope.currentlySavedWebhookKey = webhookKey;
+        $scope.webhook_key = webhookKey;
+
+        // populate webhook service choices
+        GetChoices({
+            scope: $scope,
+            url: GetBasePath('workflow_job_templates'),
+            field: 'webhook_service',
+            variable: 'webhook_service_options',
+        });
+
+        // set initial val for webhook checkbox
+        if (workflowJobTemplateData.webhook_service) {
+            $scope.enable_webhook = true;
+        } else {
+            $scope.enable_webhook = false;
+        }
+
+        // set domain / base url
+        $scope.baseURL = $location.protocol() + '://' + $location.host() + (($location.port()) ? ':' + $location.port() : '');
+
+        //
+        // webhook credential - all handlers, dynamic state, etc. live here
+        //
+
+        $scope.webhookCredential = {
+            id: _.get(workflowJobTemplateData, ['summary_fields', 'webhook_credential', 'id']),
+            name: _.get(workflowJobTemplateData, ['summary_fields', 'webhook_credential', 'name']),
+            isModalOpen: false,
+            isModalReady: false,
+            modalSelectedId: null,
+            modalSelectedName: null,
+            modalBaseParams: {
+                order_by: 'name',
+                page_size: 5,
+                credential_type__namespace: `${workflowJobTemplateData.webhook_service}_token`,
+            },
+            modalTitle: i18n._('Select Webhook Credential'),
+        };
+
+        $scope.handleWebhookCredentialLookupClick = () => {
+            $scope.webhookCredential.modalSelectedId = $scope.webhookCredential.id;
+            $scope.webhookCredential.isModalOpen = true;
+        };
+
+        $scope.handleWebhookCredentialTagDelete = () => {
+            $scope.webhookCredential.id = null;
+            $scope.webhookCredential.name = null;
+        };
+
+        $scope.handleWebhookCredentialModalClose = () => {
+            $scope.webhookCredential.isModalOpen = false;
+            $scope.webhookCredential.isModalReady = false;
+        };
+
+        $scope.handleWebhookCredentialModalReady = () => {
+            $scope.webhookCredential.isModalReady = true;
+        };
+
+        $scope.handleWebhookCredentialModalItemSelect = (item) => {
+            $scope.webhookCredential.modalSelectedId = item.id;
+            $scope.webhookCredential.modalSelectedName = item.name;
+        };
+
+        $scope.handleWebhookCredentialModalCancel = () => {
+            $scope.webhookCredential.isModalOpen = false;
+            $scope.webhookCredential.isModalReady = false;
+            $scope.webhookCredential.modalSelectedId = null;
+            $scope.webhookCredential.modalSelectedName = null;
+        };
+
+        $scope.handleWebhookCredentialSelect = () => {
+            $scope.webhookCredential.isModalOpen = false;
+            $scope.webhookCredential.isModalReady = false;
+            $scope.webhookCredential.id = $scope.webhookCredential.modalSelectedId;
+            $scope.webhookCredential.name = $scope.webhookCredential.modalSelectedName;
+            $scope.webhookCredential.modalSelectedId = null;
+            $scope.webhookCredential.modalSelectedName = null;
+        };
+
+        $scope.handleWebhookKeyButtonClick = () => {
+            Rest.setUrl(workflowJobTemplateData.related.webhook_key);
+            Wait('start');
+            Rest.post({})
+                .then(({ data }) => {
+                    $scope.currentlySavedWebhookKey = data.webhook_key;
+                    $scope.webhook_key = data.webhook_key;
+                })
+                .catch(({ data }) => {
+                    const errorMsg = `Failed to generate new webhook key. POST returned status: ${status}`;
+                    ProcessErrors($scope, data, status, form, { hdr: 'Error!', msg: errorMsg });
+                })
+                .finally(() => {
+                    Wait('stop');
+                });
+        };
+
+        $('#content-container').append($compile(`
+            <at-dialog
+                title="webhookCredential.modalTitle"
+                on-close="handleWebhookCredentialModalClose"
+                ng-if="webhookCredential.isModalOpen"
+                ng-show="webhookCredential.isModalOpen && webhookCredential.isModalReady"
+            >
+                <at-lookup-list
+                    ng-show="webhookCredential.isModalOpen && webhookCredential.isModalReady"
+                    resource-name="credential"
+                    base-params="webhookCredential.modalBaseParams"
+                    selected-id="webhookCredential.modalSelectedId"
+                    on-ready="handleWebhookCredentialModalReady"
+                    on-item-select="handleWebhookCredentialModalItemSelect"
+                />
+                <at-action-group col="12" pos="right">
+                    <at-action-button
+                        variant="tertiary"
+                        ng-click="handleWebhookCredentialModalCancel()"
+                    >
+                        ${i18n._('CANCEL')}
+                    </at-action-button>
+                    <at-action-button
+                        variant="primary"
+                        ng-click="handleWebhookCredentialSelect()"
+                    >
+                        ${i18n._('SELECT')}
+                    </at-action-button>
+                </at-action-group>
+            </at-dialog>`)($scope));
+
+        $scope.$watch('webhook_service', (newValue, oldValue) => {
+            const newServiceValue = newValue && typeof newValue === 'object' ? newValue.value : newValue;
+            const oldServiceValue = oldValue && typeof oldValue === 'object' ? oldValue.value : oldValue;
+            if (newServiceValue) {
+                $scope.webhook_url = `${$scope.baseURL}${workflowJobTemplateData.url}${newServiceValue}`;
+                $scope.enable_webhook = true;
+            } else {
+                $scope.webhook_url = '';
+                $scope.webhook_key = '';
+            }
+            if (newServiceValue !== oldServiceValue || newServiceValue === newValue) {
+                $scope.webhook_service = { value: newServiceValue };
+                sync_webhook_service_select2();
+                $scope.webhookCredential.modalBaseParams.credential_type__namespace = newServiceValue ?
+                    `${newServiceValue}_token` : null;
+                if (newServiceValue !== newValue || newValue === null) {
+                    $scope.webhookCredential.id = null;
+                    $scope.webhookCredential.name = null;
+                }
+                if (newServiceValue !== newValue) {
+                    if (newServiceValue === workflowJobTemplateData.webhook_service) {
+                        $scope.webhook_key = $scope.currentlySavedWebhookKey;
+                    } else {
+                        $scope.webhook_key = i18n._('A NEW WEBHOOK KEY WILL BE GENERATED ON SAVE');
+                    }
+                }
+            }
+        });
+
+        function sync_webhook_service_select2() {
+            CreateSelect2({
+                element:'#webhook-service-select',
+                addNew: false,
+                multiple: false,
+                scope: $scope,
+                options: 'webhook_service_options',
+                model: 'webhook_service'
+            });
+        }
+
         $scope.openWorkflowMaker = function() {
             $state.go('templates.editWorkflowJobTemplate.workflowMaker');
         };
@@ -124,6 +297,25 @@ export default [
                 .filter("[data-label-is-present=true]")
                 .map((i, val) => ({name: $(val).text()}));
 
+
+                delete data.webhook_url;
+                delete data.webhook_key;
+                delete data.enable_webhook;
+                data.webhook_credential = $scope.webhookCredential.id;
+
+                if (!data.webhook_service) {
+                    data.webhook_credential = null;
+                }
+
+                if (!$scope.enable_webhook) {
+                    data.webhook_service = '';
+                    data.webhook_credential = null;
+                }
+
+                if (data.webhook_service && typeof data.webhook_service === 'object') {
+                    data.webhook_service = data.webhook_service.value;
+                }
+
                 TemplatesService.updateWorkflowJobTemplate({
                     id: id,
                     data: data