Add PC Widget Docs

docs/helpshift-widget/configuration.mdx

@@ -142,7 +142,8 @@ helpshiftWidgetConfig.widgetOptions = {
 
 ## Theming {#theming}
 
-You can configure the Helpcenter and Web Chat's color scheme directly from the Helpshift Dashboard. For more details, refer to [For Support Admins: Configure the User Experience of Helpcenter](https://support.helpshift.com/hc/en/13-helpshift-technical-support/faq/1169-help-center-procedure-configure-look-and-feel-settings-for-sdk-x-help-center-2-0-web-support-portals-and-web-chat-v2/) and [For Support Admins: Configure the User Experience of Web Chat](https://support.helpshift.com/hc/en/13-helpshift-technical-support/faq/900-web-chat-understand-the-appearance-of-web-chat-ui-elements-sdk-x/) and in our Knowledge Base.
+You can configure the color scheme for Helpcenter and Web Chat directly from the Helpshift Dashboard. For more details, refer to For [Support Admins: Configure the User Experience of Helpcenter](https://support.helpshift.com/hc/en/13-helpshift-technical-support/faq/1169-help-center-procedure-configure-look-and-feel-settings-for-sdk-x-help-center-2-0-web-support-portals-and-web-chat-v2/)
+and [For Support Admins: Configure the User Experience of Web Chat](https://support.helpshift.com/hc/en/13-helpshift-technical-support/faq/900-web-chat-understand-the-appearance-of-web-chat-ui-elements-sdk-x/) in our Knowledge Base.
 
 ## Bots {#bots}
 

docs/pc-widget-unity/configuration.mdx

@@ -0,0 +1,384 @@
+---
+sidebar_position: 30
+title: Configuration
+description: "Configuration options for Helpshift PC Widget - Unity"
+---
+
+import {
+  Image,
+  Admonition
+} from "@site/src/components/forDocs";
+
+
+A configuration object is required to initialize the Helpshift PC Widget similar to the [Helpshift Widget](/helpshift-widget/configuration/).
+Below are the configuration options that we have**.**
+
+# Base Configuration
+
+<Admonition>
+Below mentioned configuration like `Domain`, `PlatformId`, `AppId` are mandatory for initializing the Helpshift PC Widget. For additional configurations, refer below.
+</Admonition>
+
+```csharp
+using HSWidgetLibrary
+
+var config = new HelpshiftConfig
+{
+    Domain = "<YOUR_DOMAIN>",
+    PlatformId = "<YOUR_PLATFORM_ID>",
+    AppId = "<YOUR_APP_ID>"
+};
+
+// Pass the configuration to the initialize API
+Helpshift.Initialize(Application.streamingAssetsPath, config);
+
+```
+
+1. Replace `YOUR_DOMAIN` with your Helpshift domain.
+   For example, _happyapps_ if your dashboard sits at _happyapps.helpshift.com_.
+   Domain details can be found at __Settings > SDKs (for Developers)__.
+2. Replace `YOUR_PLATFORM_ID` with details found at __Settings > SDKs (for Developers)__.
+   <Image src="/static/books/web-chat/wc-embed-sdk.png" width="full" />
+3. Replace `YOUR_APP_ID` with details found at __Settings > Your App (eg. Helpshift Demo App) > Publish ID__.
+   <Image src="/static/books/hs-widget/app-id.jpg" width="full" />
+
+
+# Optional Configuration
+
+## Widget Type {#widget-type}
+
+The `WidgetType` config value controls whether both Helpcenter and Web Chat, only Helpcenter, or only Web Chat should be loaded in the Helpshift PC Widget.
+
+<Admonition type="info" title="Note">
+
+The `WidgetType` configuration will not work with [```Helpshift.Update()```](/pc-widget-unity/helpshift-apis/#helpshiftupdate-optional) API. It will work only when added with [```Helpshift.Initialize()```](/pc-widget-unity/helpshift-apis/#helpshiftinitialize) . 
+
+</Admonition>
+
+To show **both Helpcenter and Webchat** in the Helpshift PC Widget, use the following configuration:
+
+```csharp
+using HSWidgetLibrary
+
+var config = new HelpshiftConfig
+{
+    Domain = "<YOUR_DOMAIN>",
+    PlatformId = "<YOUR_PLATFORM_ID>",
+    AppId = "<YOUR_APP_ID>",
+
+    WidgetType = "helpcenter_and_webchat"
+};
+
+// Pass the configuration to the initialize API
+Helpshift.Initialize(Application.streamingAssetsPath, config);
+```
+
+To show **only Helpcenter** in the Helpshift PC Widget, use the following configuration:
+
+```csharp
+using HSWidgetLibrary
+
+var config = new HelpshiftConfig
+{
+    Domain = "<YOUR_DOMAIN>",
+    PlatformId = "<YOUR_PLATFORM_ID>",
+    AppId = "<YOUR_APP_ID>",
+
+    WidgetType = "helpcenter"
+};
+
+// Pass the configuration to the initialize API
+Helpshift.Initialize(Application.streamingAssetsPath, config);
+```
+
+To show **only Webchat** in the Helpshift PC Widget, use the following configuration:
+
+```csharp
+using HSWidgetLibrary
+
+var config = new HelpshiftConfig
+{
+    Domain = "<YOUR_DOMAIN>",
+    PlatformId = "<YOUR_PLATFORM_ID>",
+    AppId = "<YOUR_APP_ID>",
+
+    WidgetType = "webchat"
+};
+
+// Pass the configuration to the initialize API
+Helpshift.Initialize(Application.streamingAssetsPath, config);
+```
+
+
+## Theming {#theming}
+
+You can configure the color scheme for Helpcenter and Web Chat directly from the Helpshift Dashboard.
+For more details, refer to [For Support Admins: Configure the User Experience of Helpcenter](https://support.helpshift.com/hc/en/13-helpshift-technical-support/faq/1169-help-center-procedure-configure-look-and-feel-settings-for-sdk-x-help-center-2-0-web-support-portals-and-web-chat-v2/)
+and [For Support Admins: Configure the User Experience of Web Chat](https://support.helpshift.com/hc/en/13-helpshift-technical-support/faq/900-web-chat-understand-the-appearance-of-web-chat-ui-elements-sdk-x/) in our Knowledge Base."
+
+## Bots {#bots}
+
+Bots can be enabled in Web Chat to automatically provide help and gather information from users to help your Agents resolve Issues faster. Helpshift has 3 default Bots:
+
+- **QuickSearch Bot** - deflect common problems by automatically suggesting relevant FAQs to users
+- **Identity Bot** - prompt your users for their name and/or email before they create an issue
+- **CSAT Bot** - automatically ask for feedback after an Issue is resolved
+
+For more details, refer to [Set Up Your Web Chat Bots](https://support.helpshift.com/hc/en/13-helpshift-technical-support/faq/681-bot-procedures-create-and-configure-a-custom-bot-or-feedback-bot/) in our Knowledge Base.
+
+## Full Privacy {#full-privacy}
+
+In the `HelpshiftConfig` object at the time of initialization, setting the `FullPrivacy` option to `true` ensures [COPPA](http://www.coppa.org/) compliance by:
+
+- Disabling user-initiated screenshots (users will not be able to attach files, including images, using Web Chat).
+- Making sure that Personally Identifiable Information (PII) such as name and email are not collected by Web Chat (using Identity Bot and/or the helpshiftWidgetConfig object). This means that if you set `UserName` and `UserEmail`, with `FullPrivacy` set to `true`, Helpshift will not use the `UserName` and `UserEmail` values.
+
+Moreover, in scenarios where the user attaches objectionable content, it becomes a huge COPPA compliance concern. This option helps to solve this problem.
+By default, `FullPrivacy` is set to `false`.
+
+##### Example Embed Code
+
+
+```csharp
+using HSWidgetLibrary
+
+var config = new HelpshiftConfig
+{
+    Domain = "<YOUR_DOMAIN>",
+    PlatformId = "<YOUR_PLATFORM_ID>",
+    AppId = "<YOUR_APP_ID>",
+
+    FullPrivacy = true
+};
+
+// Pass the configuration to the initialize API
+Helpshift.Initialize(Application.streamingAssetsPath, config);
+```
+
+## Initiating chat {#initiate-chat}
+
+Developers can start a new chat when the previous issue is resolved, without needing any user action like clicking the `New Conversation` button or going through the post resolution flow like feedback bot for the previously resolved issue.
+
+To do the above mentioned action, the developer will have to set `InitiateChatOnLoad` config in `HelpshiftWidgetConfig` and then use the [Helpshift.Update()](/pc-widget-unity/helpshift-apis/#helpshiftupdate-optional) API to start the new chat when the previous issue is resolved.
+
+##### Example Embed Code
+
+```csharp
+using HSWidgetLibrary
+
+var config = new HelpshiftConfig
+{
+    Domain = "<YOUR_DOMAIN>",
+    PlatformId = "<YOUR_PLATFORM_ID>",
+    AppId = "<YOUR_APP_ID>",
+
+    InitiateChatOnLoad = true
+};
+
+// Pass the configuration to the initialize API
+Helpshift.Initialize(Application.streamingAssetsPath, config);
+```
+
+## Initial user message {#initial-user-message}
+
+##### Example Embed Code
+
+```csharp
+using HSWidgetLibrary
+
+var config = new HelpshiftConfig
+{
+    Domain = "<YOUR_DOMAIN>",
+    PlatformId = "<YOUR_PLATFORM_ID>",
+    AppId = "<YOUR_APP_ID>",
+
+    InitialUserMessage = "Some initial user message"
+};
+
+// Pass the configuration to the initialize API
+Helpshift.Initialize(Application.streamingAssetsPath, config);
+```
+
+## Conversation prefill text {#conversation-prefill-text}
+
+##### Example embed code:
+
+```csharp
+using HSWidgetLibrary
+
+var config = new HelpshiftConfig
+{
+    Domain = "<YOUR_DOMAIN>",
+    PlatformId = "<YOUR_PLATFORM_ID>",
+    AppId = "<YOUR_APP_ID>",
+
+    ConversationPrefillText = "Some prefill text"
+};
+
+// Pass the configuration to the initialize API
+Helpshift.Initialize(Application.streamingAssetsPath, config);
+```
+
+## Showing a Particular FAQ Section {#faq-section-view}
+
+You can use this configuration to show FAQs from a particular FAQ section.
+
+**You will need the `publish-id` of the FAQ section to use this API:**
+
+<Image src="/static/books/misc/section-publish-id.png" width="full" />
+
+##### Example embed code:
+
+```csharp
+using HSWidgetLibrary
+
+var config = new HelpshiftConfig
+{
+  SectionId = "333",
+};
+
+// Pass the configuration to the initialize API
+Helpshift.Initialize(Application.streamingAssetsPath, config);
+```
+## Showing a Particular FAQ {#faq-question-view}
+
+You can use this configuration to show a single FAQ.
+
+**You'll need the `publish-id` of the FAQ to use this API:**
+
+<Image src="/static/books/misc/faq-publish-id.png" width="full" />
+
+<Admonition type="info" title="Note">
+
+FAQ ID takes precedence over Section ID. So if both are given, FAQ will be shown.
+
+</Admonition>
+
+##### Example embed code:
+
+```csharp
+using HSWidgetLibrary
+
+var config = new HelpshiftConfig
+{
+  FaqId = "645",
+};
+
+// Pass the configuration to the initialize API
+Helpshift.Initialize(Application.streamingAssetsPath, config);
+```
+
+## FAQ filtering by tags
+
+We have FAQ filtering capability by tags.
+With the goal of helping the end user see focused & related content e.g. basis the user demographic or device profiles, developers can now choose this capability for FAQ filtering and showing a focused FAQ list to the right audience.
+
+Typical cases why you would want to use FAQ filtering are :
+
+- You want to show specific FAQs for specific audience. E.g. if you may categorize the users as ‘beginner’, ‘intermediate’ or ‘expert’ based on your business logic.
+- You may want to show specific FAQs based on the device. E.g. a set of FAQs for iPad vs. iPhone.
+
+FAQ filtering is a 2 step approach :
+
+1. FAQs need to be classified using the `<issue tags>` field on the dashboard e.g. tags `iphone` & `ipad`.
+   <Image src="/static/books/ios/faq-filtering.png" width="full" />
+2. Once the FAQs are tagged, they can be filtered in Helpshift PC Widget using the filter options described below.
+
+<Admonition type="info" title="Note">
+
+Helpshift has 2 types of tags mainly ‘Issue Tags’ & ‘Search Tags’.
+
+- Issue tags are used to filter the FAQ list in the Helpcenter on Helpshift PC Widget with the filter rules.
+- Search tags (a.k.a Search Keywords) While searching on Helpcenter in Helpshift PC Widget it gives preference to these keywords. You can also use this to add alternative keywords that users might search for, but which may not exist in the FAQ title or the content.
+
+</Admonition>
+
+#### How to use FAQ filtering
+
+You can use this configuration by `filter` key in the `helpshiftWidgetConfig` config. The `filter` key will be an object containing 2 keys
+
+- operator : one of `AND`, `OR`, `NOT` which will serve as conditional operators for the given tags.
+- tags : the actual tags in the query
+
+|              |                                                                                |
+| ------------ | ------------------------------------------------------------------------------ |
+| Option:      | <code>filter</code>                                                            |
+| Sub-Options: | <code>tags</code> / <code>operator</code>                                      |
+| Default      | <code>nil</code>                                                               |
+
+
+##### Example embed code:
+
+```csharp
+using HSWidgetLibrary
+
+var filter = new Dictionary<string, dynamic>();
+
+filter["tags"] = new string[] { "premium", "support" };
+filter["operator"] = "AND";
+
+var config = new HelpshiftConfig
+{
+  Filter = filter
+};
+
+// Pass the configuration to the initialize API
+Helpshift.Initialize(Application.streamingAssetsPath, config);
+```
+
+## Resize Modes {#resize-modes}
+
+Determines how the Helpshift PC Widget resizes. Example values include `ResizeMode.SlimRight`, `ResizeMode.SlimCenter`, `ResizeMode.SlimLeft`, `ResizeMode.WideCenter`, and `ResizeMode.FullScreen`.
+
+<Admonition type="info" title="Note">
+By default, the Helpshift PC Widget is set to <code>ResizeMode.SlimRight</code>.
+</Admonition>
+
+##### Example embed code:
+
+```csharp
+var config = new HelpshiftConfig
+{
+    Domain = "mydomain",
+    PlatformId = "mydomain_platform_123",
+    AppId = "3",
+    ResizeMode = "SlimRight"
+};
+
+// Pass the configuration to the initialize API
+Helpshift.Initialize(Application.streamingAssetsPath, config);
+
+```
+
+#### Mode Previews
+
+<table>
+  <thead>
+    <tr>
+      <th>Mode</th>
+      <th>Preview</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>SlimRight (Default)</td>
+      <td><Image src="/static/books/pc-widget-unity/preview-right.png" width="half" centered /></td>
+    </tr>
+    <tr>
+      <td>SlimLeft</td>
+      <td><Image src="/static/books/pc-widget-unity/preview-left.png" width="half" centered /></td>
+    </tr>
+    <tr>
+      <td>SlimCenter</td>
+      <td><Image src="/static/books/pc-widget-unity/preview-center.png" width="half" centered /></td>
+    </tr>
+    <tr>
+      <td>WideCenter</td>
+      <td><Image src="/static/books/pc-widget-unity/preview-wide-center.png" width="half" centered /></td>
+    </tr>
+    <tr>
+      <td>FullScreen</td>
+      <td><Image src="/static/books/pc-widget-unity/preview-fullscreen.png" width="half" centered /></td>
+    </tr>
+  </tbody>
+</table>