Page rating

The ratings and feedback block empowers users to share their valuable insights on the usefulness and quality of a webpage's content.

Through intuitive rating systems and interactive feedback forms, websites can gather user opinions to enhance their offerings. This feature promotes active user engagement and enables continuous improvement, fostering a collaborative digital experience that caters to user preferences and needs.

The UAE design system encourages adding a feedback rating block to necessary pages - especially pages where the user interaction is the highest. The feedback and rating block must exist on the following page layouts as a mandatory block:

The service card page.
A news article, press release, event or blog article page.

Apart from the page layouts listed above, you may choose to add the Rating and Feedback block to other pages of your website which are most relevant for data collection.

The design system provides the UI to be used on the website, and does not restrict the backend development of the data collection. You may add the functionality of collecting data as required by your backend process. It is also advisable to provide a message when a user provides a feedback. Encourage the user to report an issue if the user has provided a negative feedback on the page.

<div class="grid xl:grid-cols-2 gap-10">
    <div>
        <!-- without background -->
        <div>
            <div
                class="text-lg md:text-xl xl:text-2xl text-aeblack-950 font-bold font-inter leading-normal mb-3">
                Did you find this content useful?</div>
            <p class="text-aeblack-500 font-light mb-5 md:mb-7 xl:mb-9">You can help us improve by providing
                your
                feedback about your experience.</p>
            <div class="flex gap-6 flex-wrap">
                <button class="aegov-btn btn-outline" aria-label="Register">
                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 256 256">
                        <rect width="256" height="256" fill="none" />
                        <path
                            d="M32,104H80a0,0,0,0,1,0,0V208a0,0,0,0,1,0,0H32a8,8,0,0,1-8-8V112A8,8,0,0,1,32,104Z"
                            fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="16" />
                        <path
                            d="M80,104l40-80a32,32,0,0,1,32,32V80h64a16,16,0,0,1,15.87,18l-12,96A16,16,0,0,1,204,208H80"
                            fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="16" />
                    </svg>
                    Yes
                </button>
                <button class="aegov-btn btn-outline" aria-label="Register">
                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 256 256">
                        <rect width="256" height="256" fill="none" />
                        <path d="M32,48H80a0,0,0,0,1,0,0V152a0,0,0,0,1,0,0H32a8,8,0,0,1-8-8V56a8,8,0,0,1,8-8Z"
                            fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="16" />
                        <path
                            d="M80,152l40,80a32,32,0,0,0,32-32V176h64a16,16,0,0,0,15.87-18l-12-96A16,16,0,0,0,204,48H80"
                            fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="16" />
                    </svg>
                    No
                </button>
            </div>
        </div>
    </div>
    <div>
        <!-- with background -->
        <div
            class="bg-primary-50 py-6 md:py-8 lg:py-10 xl:py-12 2xl:py-14 px-4 md:px-6 lg:px-8 xl:px-10 2xl:px-12 rounded-md md:rounded-lg xl:rounded-xl">
            <div
                class="text-lg md:text-xl xl:text-2xl text-aeblack-950 font-bold font-inter leading-normal mb-3">
                Did you find this content useful?</div>
            <p class="text-aeblack-500 font-light mb-5 md:mb-7 xl:mb-9">You can help us improve by providing
                your
                feedback about your experience.</p>
            <div class="flex gap-6 flex-wrap">
                <button class="aegov-btn btn-outline" aria-label="Register">
                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 256 256">
                        <rect width="256" height="256" fill="none" />
                        <path
                            d="M32,104H80a0,0,0,0,1,0,0V208a0,0,0,0,1,0,0H32a8,8,0,0,1-8-8V112A8,8,0,0,1,32,104Z"
                            fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="16" />
                        <path
                            d="M80,104l40-80a32,32,0,0,1,32,32V80h64a16,16,0,0,1,15.87,18l-12,96A16,16,0,0,1,204,208H80"
                            fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="16" />
                    </svg>
                    Yes
                </button>
                <button class="aegov-btn btn-outline" aria-label="Register">
                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 256 256">
                        <rect width="256" height="256" fill="none" />
                        <path d="M32,48H80a0,0,0,0,1,0,0V152a0,0,0,0,1,0,0H32a8,8,0,0,1-8-8V56a8,8,0,0,1,8-8Z"
                            fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="16" />
                        <path
                            d="M80,152l40,80a32,32,0,0,0,32-32V176h64a16,16,0,0,0,15.87-18l-12-96A16,16,0,0,0,204,48H80"
                            fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="16" />
                    </svg>
                    No
                </button>
            </div>
        </div>
    </div>
</div>

Newsletter

Slider