# Questions Widget

## Overview

{% hint style="info" %}
The [reviews-widget](https://docs.okendo.io/on-site/on-site-widgets/reviews-widget "mention") can be configured to show a Questions tab as part of a combined widget. This article describes how to include a standalone Questions Widget without reviews.
{% endhint %}

The Questions Widget lists questions that customers have asked and answers you've provided to them. 

<figure><img src="https://317471629-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKeDY1gVsPqUlb1dtZzTr%2Fuploads%2FPSeFR0thgoydz6R2dqTD%2Fquestions-widget.JPG?alt=media&#x26;token=2fbdf072-80c2-46e3-9696-7f810aad38b9" alt=""><figcaption></figcaption></figure>

## Installation

{% tabs %}
{% tab title="Shopify Online Store 2.0" %}
Instructions for a Shopify Online Store 2.0 installation can be found [here](https://support.okendo.io/en/articles/5537298-installing-okendo-on-shopify-online-store-2-0).
{% endtab %}

{% tab title="Shopify Vintage Theme" %}

1. Create a new liquid snippet in the snippets folder with the following name: `snippets/okendo-reviews-widget.liquid`
2. Inside your newly created liquid file, add the following HTML snippet:

   ```tsx
   <div data-oke-questions-widget></div>
   ```
3. Customize your snippet with the data attributes listed [here](#questions-widget-data-attributes).
4. Copy the following snippet and place it in your Theme Code where you would like the widget to appear: `{% render 'okendo-reviews-widget', product: product %}`

For more detailed instructions, read our [help centre article](https://support.okendo.io/en/articles/1770332-setting-up-okendo-reviews-on-shopify-vintage-themes).
{% endtab %}
{% endtabs %}

## Styling

The preferred method of configuring the Questions Widget is via the Okendo Admin which can be accessed in the Okendo app via Reviews -> On-Site Displays:

<figure><img src="https://317471629-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKeDY1gVsPqUlb1dtZzTr%2Fuploads%2F5ebxcNc3mK4xVkHvt3ru%2Fon-site-displays-1.jpg?alt=media&#x26;token=22388cfc-7101-4bc5-875f-ed0baa58d660" alt=""><figcaption></figcaption></figure>

## Data Attributes

Use these data attributes on the widget markup to customize its configuration. None of these attributes are required.

| Data Attribute                             | Description                                                                                                                                            | Value Type | Supported Values                                                                        |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------- | --------------------------------------------------------------------------------------- |
| `data-oke-reviews-product-id`              | Used to specify a Shopify Product ID with the word `shopify-` in front of it. The star snippet will only show aggregate data for a particular product. | `string`   | Any valid product ID in the format `shopify-` e.g. `shopify-1234567`.                   |
| `data-oke-reviews-group-id`                | Used to specify an Okendo Group ID so that the reviews widget only shows reviews for the specified group of products.                                  | `string`   | Any valid product group ID in a GUID format e.g. `69d2e67d-b980-4333-97b7-30411807a7b1` |
| `data-oke-reviews-ask-question-product-id` | Used to show the “Ask a Question” in the reviews widget to leave a question for the specified product.                                                 | `string`   | Any valid product ID in the format `shopify-` e.g. `shopify-1234567`.                   |

## Examples

### **Giving The Widget A Data Source**

Without specifying a data source for the questions, the widget will show **all** questions for your store. You can provide either a Product ID or a Group ID to use that as the data source for the questions.

#### **Product Widget**

If you are using **liquid** use the following snippet:

```markup
<div data-oke-questions-widget data-oke-reviews-product-id="shopify-{{ product.id }}"></div>
```

The general format for other frameworks is:

```html
<div data-oke-questions-widget data-oke-reviews-product-id="shopify-<PRODUCT_ID>"></div>
```

#### **Group Widget**

Learn more about Okendo Groups here:

{% embed url="<https://support.okendo.io/en/articles/3086139-understanding-okendo-groups>" %}

If you are using **liquid or general frameworks** use the following snippet:

```html
<div data-oke-questions-widget data-oke-reviews-group-id="<GROUP_ID>"></div>
```

Group ID is found in the Okendo Admin URL for a given group as described in the table above.

### Specifying a Product To Ask About

When the widget is in all-reviews or grouped mode an explicit Product ID is needed to show the "Ask a Question" button.

If you are using **liquid** use the following snippet:

```html
<div data-oke-questions-widget data-oke-reviews-ask-question-product-id="shopify-{{ product.id }}"></div>
```

The general format for other frameworks is:

```
<div data-oke-questions-widget data-oke-reviews-ask-question-product-id="shopify-<PRODUCT_ID>"></div>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.okendo.io/on-site/on-site-widgets/questions-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.