Have Questions
Overview
The VHaveQuestions component is a visually appealing and functional UI component designed to encourage user interaction. It is ideal for prompting users to ask questions or access support. The component supports customizable titles, subtitles, buttons, and an optional image. Location - ui-kit/src/components/VAds/VHaveQuestions.vue
Features
- Customizable Titles and Subtitles: Easily set the title and subtitle to convey your message.
- Dynamic Button: Add a button with customizable text and link.
- Optional Image: Display an image alongside the content, or hide it when not needed.
- Responsive Design: The component adjusts seamlessly across various screen sizes.
Importing the Component
To use the VHaveQuestions component, import it as follows:
vue
import VHaveQuestions from 'UiKit/components/VAds/VHaveQuestions.vue';Props
The component accepts the following props:
| Prop Name | Type | Default | Required | Description |
|---|---|---|---|---|
title | String | undefined | No | The title displayed in the component. |
subtitle | String | undefined | No | The subtitle displayed beneath the title. |
buttonLink | String | undefined | No | URL for the button link. If not provided, the button is hidden. |
buttonText | String | Chat with Assistant | No | Text displayed on the button. |
imageUrl | String | ./haveQuestion.png | No | URL of the image displayed beside the content. |
noImage | Boolean | false | No | When set to true, hides the image section. |
Slots
The VHaveQuestions component supports the following slots:
default: Slot for custom content inside the component.
Examples
vue
<script setup lang="ts">
import VHaveQuestions from 'UiKit/components/VAds/VHaveQuestions.vue';
</script>
<template>
<VHaveQuestions
title="Need Help?"
subtitle="Our assistant is ready to guide you."
buttonLink="https://example.com/chat"
buttonText="Start Chat"
/>
</template>