How to pin the feedback form to the bottom of an article

Requirements

• Admin access to site
• Elm UI theme (Ask your CSM if you are unclear what theme is enabled on your site.)

Benefits

• Increased feedback submission: Users are more likely to provide feedback because they do not have to reach the end of the article to do so. This improves content quality over time.
• Higher feedback volume and improved quality: More frequent feedback submissions help identify content gaps, inaccuracies, or unclear explanations. This enables continuous improvement of knowledge base article content.
• Increased customer satisfaction and retention: With better content refinement based on user input, customers will find more relevant, helpful information. This reduces frustration and increases trust in your content.
• Greater efficacy of data-driven decisions: More feedback allows for data analysis on content performance, which helps customers prioritize updates to high-impact articles, optimize self-service support, and reduce support ticket volume.

Risks

• Distraction from content: Some users may find a persistent UI element distracting, which could negatively affect their reading experience.
• Ignoring the form: If the feedback form is always present, users may become accustomed to ignoring it, reducing engagement over time.
• Unintentional clicks: The fixed position might lead to accidental interactions, which could momentarily disrupt the reading flow.

How to enable the fixed feedback form

Use JavaScript and CSS to enable this functionality.

Add the following code into a JavaScript block in the Site Footer template:

let feedbackContainer = document.querySelector(".elm-article-feedback");
let feedbackButton = document.querySelector("button.mt-feedback-button");
let feedbackInput = document.querySelector(".mt-feedback-form");

const toggleFeedback = (input, button) => {
    
    input.classList.toggle("visible");
    button.innerText = button.innerText === 'Leave feedback' ? 'Hide feedback' : 'Leave feedback';
    
}

if (feedbackButton.offsetParent !== null) {

    feedbackContainer.classList.add("visible");
    
    feedbackButton.addEventListener('click', () => { 
        toggleFeedback(feedbackInput, feedbackButton);
    });

}

Add the following CSS into the appropriate Control Panel > Custom Site CSS section:

/* Fixed feedback form styles */

@media all and (min-width: 37.5em) {
    .elm-article-feedback.visible{ 
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: auto;
    background-color: #e5f5fe; /* Change fixed container background color */
    border-top: 2px solid #30b3f6; /* Change border top color of fixed container */
    z-index: 99;
    margin-bottom: 0;
    padding: 1rem
    }
}

.mt-feedback-rating-container {
    max-width: 80em;
    margin: auto;
}

.mt-feedback-form fieldset {
    background: #f5f5f5; /* Change background of container that wraps around input form */
}

.mt-feedback-form {
    display: none !important;
}

.mt-feedback-form.visible {
    display: block !important;
}

.elm-footer {
    z-index: 0;
}