docs: fix example and add info in readme (#1376)

* docs: fix example and add info in readme - Multichannel syntax example fixed - Readme titles enhanced for better seo * docs: update readme Changed title after feedback * docs: readme updates after feedback Added open source in the description * docs: update components multichannel - removed LEGACY_PROPS mention and replaced it by detailed example - removed description text, which was redundant with the description in the table. * docs: example added in multichannel doc - a visual example has been added - the example has been modified to be simpler
hubtype · Mar 29, 2021 · cc7e9f4 · cc7e9f4
1 parent c0f1212
commit cc7e9f4
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 48 deletions.
diff --git a/.gitignore b/.gitignore
@@ -24,3 +24,4 @@ packages/botonic-cli/tests/dummy-project/package-lock.json
 packages/botonic-cli/botonic-tmp*
 .botonic.json
 .vscode
+docs/website/package-lock.json
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
 <p align="center" style="text-align: center;"><a href="https://botonic.io">Website</a> |  <a href="https://botonic.io/blog">Blog</a>  |  <a href="https://botonic.io/docs/welcome">Docs</a> |  <a href="https://botonic.io/examples">Examples</a>  |  <a href="https://botonic.io/blog/2021/03/10/introducing-botonic-office-hours">Friday Office Hours</a></p>
 <hr>
 
-## <center>Build Chatbots and Conversational Apps Using React</center>
+# <center>Build Chatbots and Conversational Apps Using React</center>
 
 [![botonic](https://img.shields.io/badge/cli-botonic-brightgreen.svg)](https://botonic.io)
 [![Version](https://img.shields.io/npm/v/@botonic/cli.svg)](https://npmjs.org/package/@botonic/cli)
@@ -15,9 +15,9 @@
 <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/intent/follow?screen_name=botonic_"><img src="https://camo.githubusercontent.com/9e04e9647d574f9e2ad27f93d6eade8f5e9d6b9fed6c50ad6399742b7713ba1f/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f666f6c6c6f772f626f746f6e69635f3f7374796c653d736f6369616c" alt="Twitter Follow" data-canonical-src="https://img.shields.io/twitter/follow/botonic_?style=social" style="max-width:100%;"></a>
 
 
-# 🐣 What is Botonic?
+# 🐣 Introducing Botonic Open Source Framework
 
-[Botonic](https://botonic.io) is a full-stack framework to create chatbots and modern conversational apps made with ❤️ by [Hubtype](https://www.hubtype.com/).
+[Botonic](https://botonic.io) is an open source full-stack framework to create chatbots and modern conversational apps made with ❤️ by [Hubtype](https://www.hubtype.com/).
 
 It's built on top of:
 

diff --git a/docs/docs/components/components-multichannel.md b/docs/docs/components/components-multichannel.md
@@ -8,8 +8,47 @@ title: Multichannel
 The `Multichannel` component is a wrapper component used to transform existing representations of a channel into another one that does not support it natively. 
 As an example, it can be used to adapt native representations of a Text with Buttons or Carousel (available in Facebook) for WhatsApp : the multichannel component allows you to provide a way to concatenate and unify messages and conversations for your WhatsApp bot.
 
+## Example
+
+To get this kind of output:
+
+<img src="https://botonic-doc-static.netlify.com/images/multichannel/multichannel-visuals.png" width="600"/>
+
+
+You just have to add the following code in your `action` files, under the `render` section.
+
+```javascript
+<Multichannel
+  text={{ indexMode: 'number' }}
+  indexSeparator={':'}
+  messageSeparator={'\n'}
+>
+```
+
+
+As an example, you would get something like this: 
+
+```javascript
+<Multichannel>
+  <Text>
+    Welcome! Choose from the options below.
+      <Button key={'1'} payload='payload1'>
+        Option 1
+      </Button>,
+      <Button key={'2'} payload='payload1'>
+        Option 2
+      </Button>,
+      <Button key={'3'} payload='payload1'>
+        Option 3
+      </Button>
+  </Text>
+</Multichannel>
+```
+
 ## Properties
 
+You can customize the output by using this list of properties.
+
 | Property               | Type                                 | Description                                                                                                                            | Required | Default value |
 |------------------------|--------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------|----------|---------------|
 | children               | Botonic Component                    | Enable the multichannel                                                                                                                | Yes      | -             |
@@ -26,52 +65,7 @@ As an example, it can be used to adapt native representations of a Text with But
                       
 
 
-## Example
-
-Add the following code in your `action` files, under the `render` section.
-
-```javascript
-<Multichannel
-  firstIndex={'a'}
-  boldIndex={true}
-  carousel={{ indexMode: 'letter' }}
-  text={{ indexMode: 'letter' }}
-  indexSeparator={'.'}
-  messageSeparator={'\n\n'}
->
-```
-
-### Description
-
-- `firstIndex` = The index is the option title of a choice. Ex: a. b. or 1. 2. etc.
-
-- `boldIndex`: Applies a bold format to the index element. True or False.
 
-- `Carousel`: Adds a letter or number to the index for a carousel.
 
-- `Text` : Adds a letter or number to the index for a text.
 
-- `Indexseparator`: Adds a dot or dash after the letter or number.
 
-- `Message separator` : Adds a space between the various messages. `{'\n\n'}` adds a line break between the index message and the selection option.
-
-### Output
-
-```javascript
-<Multichannel {...LEGACY_PROPS}>
-  <Text>
-    Some with buttons
-    {[
-      <Button key={'1'} payload='payload1'>
-        Button 1
-      </Button>,
-      <Button key={'2'} path='path1'>
-        Button 2
-      </Button>,
-      <Button key={'3'} url='http://testurl.com'>
-        Visit website
-      </Button>,
-    ]}
-  </Text>
-</Multichannel>
-```