# Dynamic FAQ

### Integration - Dynamic FAQ

The search field of the dynamic FAQ is generated by a javascript script. It can also consist of images and other elements depending on the customization that has been performed.

### HTML code

To integrate the dialog box, these files must be hosted on a file server.

The page that should host the dynamic FAQ must reserve a location where the fieldbox and the results will be displayed.

Generally, a dedicated page is kept for this module with only undefined header and footer.

An HTML node with an identifier must be present. This identifier will be used by javascript to build the graphic elements in the page.

Below, an example HTML code for integration of the fieldbox.

This HTML file is hosted in the same directory as the chatbox.js file.

<figure><img src="https://264031769-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPMvi3Izk7dvjl9HitZpp%2Fuploads%2F7FR0CoJnF3RG7mbBMl37%2Fimage.png?alt=media&#x26;token=23e6da90-470f-459f-b84d-a64240f6abe6" alt=""><figcaption></figcaption></figure>

The DOCTYPE tag at the top of the file is absolutely necessary for the proper functioning of the dialog box.

In addition, the *script* tag has to have the attribute *id=dydufieldbox*.

### Context variables

To enable the identification of the user and to customize the answers, it is possible to use the dialog engine or to display to the Livechat operator information from the website itself:

* Contents of page elements:
  * basket amount;
  * user name;
  * error code currently displayed;
  * etc.
  * Variable values ​​or javascript functions;
  * Cookie values.

The retrieval of this information generally does not require to edit the site that includes the dialog box, except if you want to retrieve information that is not present at the time of integration.

The declaration of context variables is done in this way:

<figure><img src="https://264031769-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPMvi3Izk7dvjl9HitZpp%2Fuploads%2FGseE3QtATpSdvoH7ElMi%2FCapture%20d%E2%80%99e%CC%81cran%202023-09-25%20a%CC%80%2018.10.31.png?alt=media&#x26;token=f32349d7-6b31-454a-911f-42aea72bafb0" alt=""><figcaption></figcaption></figure>

*getMontantPanier* is the javascript function that gets the name of this shop.

<figure><img src="https://264031769-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPMvi3Izk7dvjl9HitZpp%2Fuploads%2FJZxHKTFBr3ZjWGkAQlly%2FCapture%20d%E2%80%99e%CC%81cran%202023-09-25%20a%CC%80%2018.10.46.png?alt=media&#x26;token=54adea99-cde7-47b0-b505-01da6b4988e9" alt=""><figcaption></figcaption></figure>

It can be defined either in the dialog box or by another script if it is loaded on the same pages as the dialog box.

Writing functions for context variables can be done by the customer's teams as well as by our teams.

#### Debugging

To check if the context variables are functional, go to the page where the dynamic FAQ has been integrated and ask any question in the fieldbox.

In the **Network** tab of the *Developer tools* panel, you must locate the last *talk* request:

<figure><img src="https://264031769-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPMvi3Izk7dvjl9HitZpp%2Fuploads%2FS8O3hdMkqo11lxXEzXZl%2Fimage.png?alt=media&#x26;token=3bfc1472-9428-44e4-98ad-eb79e9cb0c32" alt=""><figcaption></figcaption></figure>

In the parameter list, find the *contextVariables* parameter.

This list should include the list of context variables that have been saved in DYDUServlet, with their value encoded in base64.

In this example, you can see the two variables *first\_name* and *last\_name*:

* first\_name is *Sm9obg*== base64 ("*John*");
* last\_name is *RG9v*== base64 ("*Doo*").

#### Browsers to be tested

| Desktop web browser | Version | Compatibility |
| ------------------- | ------- | ------------- |
| Microsoft Edge      | ≥ 80    | Total         |
| Mozilla Firefox     | ≥ 68    | Total         |
| Apple Safari        | ≥ 13.0  | Total         |
| Google Chrome       | ≥ 83    | Total         |

| Mobile terminal | Version | Compatibility |
| --------------- | ------- | ------------- |
| iOs             | ≥ 10    | Total         |
| Android         | ≥ 6.0   | Total         |

The proper operation of the following elements needs to be checked:

* The input field;
* The send button;
* Autocomplete: suggestion when writing.

When a question is asked, you should see:

* The topics of the proposed FAQs;
* The titles of the FAQs;
* Related answers;
* Satisfaction (optional – and only on FAQs related the knowledge base, ie it does not concern the FAQs from external indexing).

#### Interactions

1. **Ask a question**

This process should be tested by sending a request by pushing **Enter** or by clicking on the **Ask** button.

2. **Redirect link to another knowledge**

Some knowledge may contain a link in their answer to allow access to another knowledge, it is therefore necessary to identify a knowledge using these redirect links and check that the use of this link displays the targeted knowledge.

3. **Link to another page**

Some knowledge can contain in their answer a link allowing access to another page of the site, it is necessary to identify a knowledge using these links and check that the use of this link causes the page change. Clicking on this type of link causes a query to the dialogue server so as to track the usage that is made by the users.

4. **Empty input field**

When the input field is empty, it must not not be possible to submit the request to the server, as well by pressing **Entry** in the input field only by the send button. This send button must also be grayed out or inactive.

5. **Decision trees**

When a knowledge includes a decision tree, it is necessary to check that clicking on the "+" icons displays the sub-branch replies.

6. **Redirect URL**

When a knowledge is configured with a redirect URL, check that the FAQ title becomes clickable or that a clickable link appears next to the FAQ.

7. **Url of the question asked**

You have to check that the URL of the page of the asked question uses the terms of the question.

8. **Returns and page changes**

When two questions are asked one after the other, going back to the previous page has to display the first question again. It should also be the case when changing pages and going back to the asked question.