docs: various files

Updates based on feedback
hubtype · Nov 17, 2020 · fc2aa38 · fc2aa38
1 parent c38769b
commit fc2aa38
Show file tree

Hide file tree

Showing 12 changed files with 43 additions and 91 deletions.
diff --git a/docs/docs/components/components-location.md b/docs/docs/components/components-location.md
@@ -21,12 +21,9 @@ The `Location` component is used to display precise locations, for example if a
 
 ## Example
 
-<details>
-<summary>Output</summary>
 
-![](https://botonic-doc-static.netlify.com/images/doc_location2.png)
+ <img src="https://botonic-doc-static.netlify.com/images/doc_location2.png" width="200" />
 
-</details>
 
 
 ```javascript

diff --git a/docs/docs/components/components-text.md b/docs/docs/components/components-text.md
@@ -14,12 +14,8 @@ The `Text` component is the simplest and easiest way to talk to the user.
 
 ## Example
 
-<details>
-<summary>Output</summary>
+ <img src="https://botonic-doc-static.netlify.com/images/components_text.png" width="200" />
 
-![](https://botonic-doc-static.netlify.com/images/components_text.png)
-
-</details>
 
 ### Text
 

diff --git a/docs/docs/concepts/10.actions.md b/docs/docs/concepts/10.actions.md
@@ -54,11 +54,9 @@ export default class extends React.Component {
 }
 ```
 
-### Example in Facebook Messenger
+### Example
 
-<p align="center">
 <img src="https://botonic-doc-static.netlify.app/images/john_doe.png" width="200" />
-</p>
 
 ## Data Persistence
 

diff --git a/docs/docs/plugins/plugin-contentful.md b/docs/docs/plugins/plugin-contentful.md
@@ -282,12 +282,12 @@ remember to always press RETURN after typing a new keyword. Otherwise, it will b
 
 **Types of Search** `searchByKeywords` allows 3 different match types, all of them performing the previously specified preprocessing:
 
-- NLY_KEYWORDS_FOUND: the content must have a keyword with all the words from the search text.
+- ONLY_KEYWORDS_FOUND: the content must have a keyword with only the words from the search text.
 - KEYWORDS_AND_OTHERS_FOUND: The keyword may be preceded and followed by other words in the search text.
 - ALL_WORDS_IN_KEYWORDS_MIXED_UP: All the words in the keyword must appear on the search text, even if mixed up with other words in any order.
 
 **Schedule**
-The plugin allows configuring weekly schedules from the Contentful dashboard.
+The plugin allows you to use the Customer Support queues in a more flexible way.
 
 **Schedule Exceptions**
 To define exceptions to the general weekly schedule, create a _Day Schedule_ at the _Exceptions_ section. For these days, the corresponding weekday schedule will be ignored.

diff --git a/docs/docs/webchat/webchat-api.md b/docs/docs/webchat/webchat-api.md
@@ -23,7 +23,7 @@ These methods are:
 
 ## Webchat Listeners
 
-In the same way, sometimes you would want to react to some of the events that take place when some actions occur in the Webchat. To react to the actions that occur in the Webchat, you can define the following event listeners:
+In the same way, sometimes you may want to react to some of the events that take place when some actions occur in the Webchat. To do so, you can define the following event listeners:
 
 **`Snippet to be embedded`**
 

diff --git a/docs/docs/webchat/webchat-blockinput.md b/docs/docs/webchat/webchat-blockinput.md
@@ -3,7 +3,7 @@ id: webchat-blockinput
 title: Block Inputs
 ---
 
-For security reasons or to avoid harmful or threatening messages, you can block these inputs:
+For security reasons or to avoid harmful or threatening messages, you can block inputs based on the exclusion rules:
 
 ```javascript
 blockInputs: [

diff --git a/docs/docs/webchat/webchat-covercomponent.md b/docs/docs/webchat/webchat-covercomponent.md
@@ -7,12 +7,7 @@ title: Cover Component
 
 The Cover component enables the user to authenticate when starting a conversation. In that way, you can retrieve relevant information at the very beginning of the interaction, such as the user's name or e-mail address.
 
-<details>
-<summary>Example</summary>
-
-![](https://botonic-doc-static.netlify.com/images/webchat/covercomponent.png)
-
-</details>
+<img src="https://botonic-doc-static.netlify.com/images/webchat/covercomponent2.png" width="200" />
 
 **Note:** In this example, we are using `@material-ui/core` so make sure to install it by running `npm i @material-ui/core`.
 
@@ -130,18 +125,12 @@ export const webchat = {
 }
 ```
 
-<details>
-<summary>Example</summary>
-
-![](https://botonic-doc-static.netlify.com/images/webchat/covercomponent2.png)
-
-</details>
 
 When the user authenticates:
 
 - The information is stored in the user information (`session.user` and `user`).
 
-- The component is closing.
+- The component closes.
 
 - The **START** user message is displayed and the action with a **PAYLOAD** is called.
 

diff --git a/docs/docs/webchat/webchat-enable.md b/docs/docs/webchat/webchat-enable.md
@@ -3,7 +3,7 @@ id: webchat-enable
 title: Enabling and Disabling Webchat Visibility
 ---
 
-You can allow the Hubtype Desk user to enable or disable its webchat whenever he wants. An API call to the backend will be done to determine if the webchat should be shown or not.
+You can allow the Hubtype Desk user to hide the webchat at any time. By calling an API to the backend, you can indicate whether the webchat must be shown.
 
 **Note:** This functionality is available from Botonic v0.13.0 and above.
 
@@ -13,7 +13,7 @@ You can allow the Hubtype Desk user to enable or disable its webchat whenever he
 export const webchat = { visibility: true }
 ```
 
-2. To be able to enable or disable the webchat, you can define the webchat view with a function that returns `true` (visible) or `false` (not visible).
+2. To control the webchat visibility, you can define the webchat view with a function that returns `true` (visible) or `false` (not visible).
 
 ```javascript
 Botonic.render(document.getElementById('root'), {

diff --git a/docs/docs/webchat/webchat-markdown.md b/docs/docs/webchat/webchat-markdown.md
@@ -39,12 +39,10 @@ By default, webchat supports markdown syntax.
    }
    ```
 
-   <details>
-   <summary>Output example</summary>
+Example:
 
-   ![](https://botonic-doc-static.netlify.com/images/markdown/mdwebchat1.png)
-
-   </details>
+   <img src="https://botonic-doc-static.netlify.com/images/markdown/mdwebchat1.png" width="200" />
+
 
 2. Customize the style in the `index.js` file.
 
@@ -72,18 +70,15 @@ By default, webchat supports markdown syntax.
      },
    ```
 
-   <details>
-   <summary>Output example</summary>
+Example:
 
-   ![](https://botonic-doc-static.netlify.com/images/markdown/mdwebchat2.png)
+ <img src="https://botonic-doc-static.netlify.com/images/markdown/mdwebchat2.png" width="200" />
 
-   </details>
 
 **Multiline Support**
 
-To use multiple line breaks, you must add
-`</br>` tags in your `js` file, or use a function which returns `</br>` tags in the string.
-You get an additional line break between "## Links Examples" and "---" separator.
+To use multiple line breaks, you must add `</br>` tags in your `js` file, or use a function which returns `</br>` tags in the string.
+In the example below, you get an additional line break between "## Links Examples" and "---" separator.
 
 ```javascript
 return (
@@ -103,9 +98,5 @@ return (
 )
 ```
 
-<details>
-<summary>Example</summary>
-
-![](https://botonic-doc-static.netlify.app/images/concepts_wmultiline.png)
-
-</details>
+Example:
+ <img src="https://botonic-doc-static.netlify.app/images/concepts_wmultiline.png" width="200" />
diff --git a/docs/docs/webchat/webchat-persistentmenu.md b/docs/docs/webchat/webchat-persistentmenu.md
@@ -12,26 +12,18 @@ persistentMenu: [
   { closeLabel: "Close Menu" },
 ],
 ```
+Example:
 
-<details>
-<summary>Example</summary>
+ <img src="https://botonic-doc-static.netlify.com/images/webchat_persistent_menu.png" width="200" />
 
-![](https://botonic-doc-static.netlify.com/images/webchat_persistent_menu.png)
-
-</details>
 
 The persistent menu accepts the same properties as Botonic Buttons, e.g.: `payload` and `url`.
 
-**If you want to darken the webchat in the background** and focus on the persistent menu only, you can use a Dark Background. It can be defined under the properties `theme.darkBackgroundMenu` or `theme.menu.darkBackground`.
-
-<details>
-<summary>Example</summary>
+**To darken the webchat in the background** and focus on the persistent menu only, you can use a Dark Background. It can be defined under the properties `theme.darkBackgroundMenu` or `theme.menu.darkBackground`.
 
-![](https://botonic-doc-static.netlify.com/images/webchat/darkbg.png)
 
-</details>
+ <img src="https://botonic-doc-static.netlify.com/images/webchat/darkbg.png" width="200" />
 
-This is how it should look like in your final webchat file.
 
 **src/webchat/index.js**
 
@@ -65,12 +57,10 @@ export const webchat = {
 
 You can customize the persistent menu button with the `theme.customMenuButton` or `theme.userInput.menuButton.custom` properties.
 
-<details>
-<summary>Example</summary>
+Example:
 
-![](https://botonic-doc-static.netlify.com/images/webchat/persmenu-button.png)
+ <img src="https://botonic-doc-static.netlify.com/images/webchat/persmenu-button.png" width="200" />
 
-</details>
 
 To do so:
 
@@ -104,7 +94,7 @@ export const CustomMenuButton = () => (
 
 ### Menu
 
-In order to have your entire persistent menu customized, first you will need to create a unitary button for each of the options. To do so, you can create a component like this one:
+In order to have your entire persistent menu customized, first you will need to create a button for each of the options. To do so, you can create a component like this one:
 
 **src/webchat/custom-persistent-menu-button.js**
 
@@ -204,10 +194,7 @@ export const CustomPersistentMenu = ({ onClick, options }) => {
 }
 ```
 
-<details>
-<summary>Example</summary>
-
-![](https://botonic-doc-static.netlify.com/images/webchat/webchat_custommenu.png)
+Example:
 
-</details>
+ <img src="https://botonic-doc-static.netlify.com/images/webchat/webchat_custommenu.png" width="200" />
 
diff --git a/docs/docs/webchat/webchat-timestamp.md b/docs/docs/webchat/webchat-timestamp.md
@@ -3,7 +3,7 @@ id: webchat-timestamp
 title: Timestamp
 ---
 
-Timestamps are used to add and customize the time and date (color, position, locale) below the chat message. They are disabled by default.
+Timestamps are used to display the time and date (with customizable color, position and locale) below the chat message. They are disabled by default. 
 
 To enable timestamps:
 

diff --git a/docs/docs/webchat/webchat-updates.md b/docs/docs/webchat/webchat-updates.md
@@ -3,7 +3,9 @@ id: webchat-updates
 title: Dynamic Updates
 ---
 
-The `WebchatSettings` component offers a dynamic bot interaction, where webchat properties can be updated on the run depending on the conversation.
+The `WebchatSettings` component offers a dynamic bot interaction, where webchat properties can be updated on the fly depending on the conversation.
+
+## Example 1
 
 Let's say you want to prepare the following behavior when starting the conversation:
 
@@ -12,7 +14,7 @@ Let's say you want to prepare the following behavior when starting the conversat
 - Attachements are enabled.
 - There is a `blockInputs`.
 
-1. Add the following content in your **action** file.
+Add the following content in your **action** file.
 
 ```javascript
 import React, { useContext } from 'react'
@@ -45,12 +47,11 @@ export default class extends React.Component {
 }
 ```
 
-<details>
-<summary>Example</summary>
 
-![](https://botonic-doc-static.netlify.com/images/webchat/dynamic_updates1.png)
+ <img src="https://botonic-doc-static.netlify.com/images/webchat/dynamic_updates1.png" width="200" />
+
 
-</details>
+## Example 2
 
 Now you want to get the following behavior during the conversation:
 
@@ -60,7 +61,7 @@ Now you want to get the following behavior during the conversation:
 - The `emojiPicker` is enabled.
 - A `persistentMenu` is dynamically added.
 
-2. Add the following content in your **action** file.
+Add the following content in your **action** file.
 
 ```javascript
 import React from 'react'
@@ -88,16 +89,13 @@ export default class extends React.Component {
 }
 ```
 
-<details>
-<summary>Example</summary>
 
-![](https://botonic-doc-static.netlify.com/images/webchat/dynamic_updates2.png)
+ <img src="https://botonic-doc-static.netlify.com/images/webchat/dynamic_updates2.png" width="200" />
+ <img src="https://botonic-doc-static.netlify.com/images/webchat/dynamic_updates3.png" width="200" />
 
-![](https://botonic-doc-static.netlify.com/images/webchat/dynamic_updates3.png)
+## Example 3
 
-</details>
-
-3. Finally, a simple action can be added just to change the color (as `WebchatSettings` only returns visual changes):
+Finally, a simple action can be added just to change the color (as `WebchatSettings` only returns visual changes):
 
 ```javascript
 export default class extends React.Component {
@@ -107,9 +105,5 @@ export default class extends React.Component {
 }
 ```
 
-<details>
-<summary>Example</summary>
-
-![](https://botonic-doc-static.netlify.com/images/webchat/dynamic_updates4.png)
 
-</details>
+ <img src="https://botonic-doc-static.netlify.com/images/webchat/dynamic_updates4.png" width="200" />