Knowledge base deflection in a form
Last Update: Sep 2024 • Est. Read Time: 6 MINYou can turn on knowledge base deflection for your forms so that users can see up to 3 recommended articles that can help answer their questions after they submit a support form. This can help encourage them to self serve and solve their own support request, which will allow your agents to dedicate time to more urgent matters.
Who can access this feature? | |
User types | Content administrators have access to the Forms page. |
In this article:
Turn on form deflection
- Go to Settings> Knowledge Base > Forms.
- Select an existing form or select Add Form.
- Turn on the Deflection toggle in the Form Settings panel.
- Select Save Changes.
View a form submission in Kustomer
Once a form is submitted, it appears in Kustomer as a new conversation and all of the information that was entered in the form is shown in the message. Form submissions can be identified by the Form channel icon.
You can reply to form submissions through an email. The email address that was entered with the form submission is automatically filled in when replying to the form.
Update your theme files
If you are using form deflection and have a custom theme for your knowledge base or are using an older theme that was created before deflection became available, you need to modify your form.css and article.jsx files before you can start deflecting form submissions.
Note: If you are using the default theme, these updates are made automatically and you do not need to edit your files.
- Go to Settings> Knowledge Base > Themes.
- Select your custom theme.
- Select your custom form.css file and copy and paste the following block of code into it:
/* ============================== Modal ============================== */ /* The Modal (background) */ .form-modal { display: flex; position: fixed; /* Stay in place */ z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } .form-modal-container { width: 100%; display: flex; align-items: center; justify-content: center; } .form-modal-box { max-width: 600px; width: 80%; position: relative; } /* Modal Content */ .form-modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; overflow-y: scroll; max-height: 700px; } @media only screen and (max-width: 768px) { .form-modal-box { max-height: 100%; max-width: 100%; width: 100%; } .form-modal-content { height: 100%; max-height: 100%; width: 100%; -webkit-overflow-scrolling: touch; } } /* The Close Button */ .form-modal-close { display: flex; justify-content: flex-end; } .form-modal-close:hover, .form-modal-close:focus { color: #000; cursor: pointer; } .form-modal-success-container { display: flex; align-items: center; justify-content: center; flex-direction: column; } .form-modal-success-container-no-results { margin: 50px auto; } .form-modal-success { text-align: center; font-size: 16px; } .form-modal-divider { margin: 20px auto; background-color: #dbdadf; height: 1px; } .form-deflection-header { font-size: 18px; font-weight: bold; } .form-deflection-description { font-size: 16px; margin: 15px auto; } .form-deflection-item { border-radius: 3px; border: solid 1px #dbdadf; margin-bottom: 15px; } .form-deflection-item-article { padding: 20px; } .form-deflection-item-article-name { font-size: 16px; font-weight: bold; display: flex; align-items: baseline; } .form-deflection-item-article-body { margin: 10px 0; font-size: 14px; } .form-deflection-item-article-actions { display: flex; justify-content: space-between; align-items: center; } .form-deflection-item-article-read-more, .form-deflection-item-article-link { display: flex; align-items: center; font-size: 14px; color: #2e96cd; cursor: pointer; } .form-deflection-item-article-link { margin-left: 5px; line-height: 16px; } .form-deflection-item-article-read-more i { line-height: 14px; } .form-deflection-item-article-read-text { margin-left: 5px; } .form-deflection-item-article-cta { border-top: 1px solid #dbdadf; background-color: #f9fafc; padding: 20px; display: flex; justify-content: space-between; align-items: center; } .form-deflection-item-article-cta-text { font-size: 16px; }
- Select your article.jsx file and copy and paste the following code below the this.handleCloseRequest = this.handleCloseRequest.bind(this); line.
this.handleCloseFormHookRequest = this.handleCloseFormHookRequest.bind(this); this.handleCloseProductizedFormRequest = this.handleCloseProductizedFormRequest.bind(this);
Make sure you add it between the { }. - Copy and paste the following code into your article.jsx file.
Note: If you are already using the handleCloserequest() function, replace it with this code.
handleCloseProductizedFormRequest(articleVersionId, closeOnLoad) { const { data, org } = this.props; const formId = _.get(data, 'deflection.formId'); const externalId = _.get(data, 'deflection.externalId'); const queryTerm = _.get(data, 'deflection.queryTerm'); const emailValue = _.get(data, 'deflection.emailValue'); const emailLabel = _.get(data, 'deflection.emailLabel'); const url = `https://${org.name}.api.kustomerapp.com/p/v1/kb/forms/${formId}/submissions`; const formData = { externalId, }; const deflectionData = { status: 'accepted', messageSubject: queryTerm, articleVersionId, }; const customerEmailData = { value: emailValue, label: emailLabel, attributeType: 'customer', attributeProperty: 'emails' }; formData.deflectionTracking = JSON.stringify(deflectionData); formData.customerEmail = JSON.stringify(customerEmailData); return fetch(url, { method: 'PUT', body: JSON.stringify(formData), headers: { "Content-type": "application/json" } }) .then(() => { if (closeOnLoad) { this.setState({ closedRequest: true }); } }) .catch((err) => { console.error(err); }); } handleCloseFormHookRequest(articleVersionId, closeOnLoad) { const { data, org } = this.props; const externalId = _.get(data, 'deflection.externalId'); const conversationId = _.get(data, 'deflection.conversationId'); const signature = _.get(data, 'deflection.signature'); const source = _.get(data, 'deflection.source'); const orgId = _.get(org, 'settings.org'); let url = ''; const patchData = {}; if (externalId) { url = `https://${org.name}.api.kustomerapp.com/v1/hooks/form/deflection/${orgId}/${externalId}/${articleVersionId}`; patchData.status = 'accepted'; } else if (conversationId) { if (closeOnLoad) { url = `https://${org.name}.api.kustomerapp.com/p/v1/kb/conversations/${conversationId}/deflection`; patchData.status = 'accepted'; } else { url = `https://${org.name}.api.kustomerapp.com/p/v1/kb/conversations/${conversationId}/visit`; } } if (conversationId && source === 'email') { patchData.org = orgId; patchData.articleVersionId = articleVersionId; patchData.signature = signature; } return fetch(url, { method: 'PATCH', body: JSON.stringify(patchData), headers: { "Content-type": "application/json" } }) .then(() => { if (closeOnLoad) { this.setState({ closedRequest: true }); } }) .catch((err) => { console.error(err); }); } handleCloseRequest(articleVersionId, closeOnLoad) { const { data } = this.props; const formHookEnabled = _.get(data, 'deflection.formHookEnabled'); if (formHookEnabled && formHookEnabled === 'false') { return this.handleCloseProductizedFormRequest(articleVersionId, closeOnLoad); } return this.handleCloseFormHookRequest(articleVersionId, closeOnLoad); }
- Select Save.
Now, when a customer uses your form to submit a support request, they will get a list of suggested articles once they submit the form.
Notes:
- Articles must be assigned to a category in order for them to be presented as a suggested article.
- Articles are suggested based on what your customer input in the Subject line of the form.
The customer can select any of the suggestions to view the article in its entirety. If it resolves their request, the conversation that was created by the form in Kustomer will automatically close once they select Yes, close my request.