Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add PC Widget Docs #157

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
72 changes: 72 additions & 0 deletions docs/pc-widget-unity/available-apis.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
---
sidebar_position: 50
title: List of Available APIs
saga-hs marked this conversation as resolved.
Show resolved Hide resolved
description: "List of available APIs for Helpshift PC widget"
---

### Helpshift.Initialize
**Parameters:**
saga-hs marked this conversation as resolved.
Show resolved Hide resolved
- path (string): The base path to the Application's streaming assets, e.g., Application.streamingAssetsPath.
- helpshiftConfig (object): A configuration object for the widget.

**Description:** Initializes the HelpShift widget and runs it in the background, enabling it to listen for notifications. If notifications are a high priority, this method should be called when the game starts to ensure timely event handling.
saga-hs marked this conversation as resolved.
Show resolved Hide resolved
saga-hs marked this conversation as resolved.
Show resolved Hide resolved

**Example Usage:**
```
Helpshift.Initialize(Application.streamingAssetsPath, helpshiftConfig);
```

### Helpshift.Show
**Parameters:** None

**Description:**

Displays the HelpShift widget on the screen.
- This is typically invoked during the on-click action of a clickable element (e.g., a button).
- `Important:` Ensure that HelpShift.Initialize() has been called earlier in the game flow before invoking this method; otherwise, the widget will not function properly.

**Example Usage:**
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

specific language for snippet for formatting.

Copy link
Collaborator Author

@saga-hs saga-hs Jan 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is not possible when we are using the <code> component

```
Helpshift.Show()
```

### HelpShift.Hide
**Parameters:** None
saga-hs marked this conversation as resolved.
Show resolved Hide resolved

**Description:**

Hides the HelpShift widget from the screen.
- `Note:` Clicking the "X" button on the widget also triggers the hide functionality.
saga-hs marked this conversation as resolved.
Show resolved Hide resolved
- `Usage:` Typically used in scenarios where the widget needs to be temporarily removed from view to avoid distractions, adapt to UI changes, or maintain a seamless user experience during specific gameplay moments, such as cutscenes, high-focus sequences, or state transitions.
- `Behaviour:` The widget is hidden instead of closed to ensure the background event system remains active for handling notifications.

**Example Usage:**
```
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Specify language

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is not possible when we are using the <code> component

Helpshift.Hide()
```
### HelpShift.CleanUp
saga-hs marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make Helpshift consistent everywhere

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want to start API names with capital letters? Or should it be Helpshift.show instead of `Helpshift.Show

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Helpshift made consistent

PC Widget C sharp API are like this Helpshift.Show

**Parameters:** None
saga-hs marked this conversation as resolved.
Show resolved Hide resolved

**Description:**
saga-hs marked this conversation as resolved.
Show resolved Hide resolved

Shuts down the Helpshift widget and terminates its background process. This method should be called during game shutdown to release resources and ensure proper cleanup.
saga-hs marked this conversation as resolved.
Show resolved Hide resolved

- `Usage:` Call this inside Unity's `OnApplicationQuit()` method.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove code formatting.


**Example Usage:**
```
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Specify language

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as above

Helpshift.CleanUp()
```

### HelpShift.Update ( Optional )
saga-hs marked this conversation as resolved.
Show resolved Hide resolved
**Parameters:** None
saga-hs marked this conversation as resolved.
Show resolved Hide resolved

**Description:**

Handles events sent from the HelpShift widget to Unity. This method is typically called inside Unity's Update() method.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want to mention Helpshift Widget in the docs because it is internal to us and the customers/developers does need to know about it?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, as we are using Helpshift web widget in PC widget

- `Note:` This is optional in the current workflow as no events are being sent from the widget to Unity.
saga-hs marked this conversation as resolved.
Show resolved Hide resolved

**Example Usage:**
```
saga-hs marked this conversation as resolved.
Show resolved Hide resolved
Helpshift.Update()
```
75 changes: 75 additions & 0 deletions docs/pc-widget-unity/build-project.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
---
saga-hs marked this conversation as resolved.
Show resolved Hide resolved
sidebar_position: 20
title: Building Project
description: ""
---
import {
Image,
DownloadButton
} from "@site/src/components/forDocs";

## Building the Projects

<DownloadButton classes="mb-3" text="Download PC Widget"/>

The repository contains 3 projects:
- ***HSUnityWidget*** which is a sample Unity Project.
- ***HSWidgetLibrary*** which is a .NET Framework dll project that runs in Unity and has the necessary APIs for integration.
- ***WPFWebview*** which is a .NET CORE WPF application that hosts the web view.

### WPFWebView

This is a .NET Core WPF application.

**Output:**
2 files (*Support.exe* and *WebView2Loader.dll*)

**Building the Project**:
Use `Publish Selection` option from the Build menu item

<Image src="/static/books/pc-widget-unity/publish-selection.png" width="half" />


Configure the Publish option to produce the files in a local folder.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

publish option & Use the below publish profile settings?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, but this is for internal use.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I meant the lowercasing of the words 😅

Use the below Publish profile settings.

<Image src="/static/books/pc-widget-unity/publish-setting.png" width="half" />

Publish the build and copy *Support.exe* and *WebView2Loader.dll* to the Unity sample project as below to the StreamingAssets folder.
Copying to StreamingAssets folder ensures that these binaries are copied to the final Unity player build.

If we are making any changes to this project, we should copy both the files to the StreamingAssets folders of the Sample Unity project

<Image src="/static/books/pc-widget-unity/streammingpath.png" width="half" />

### HSWidgetLibrary

This is a .NET framework class library project that integrates into the Unity layer and acts as a bridge between Unity and WebView.

Build the project in the `Release` configuration using the Build menu item

<Image src="/static/books/pc-widget-unity/build-solution.png" width="half" />

**Output:** `HSWidgetLibrary.dll` and `Newtonsoft.Json.dll` files that are placed in the Plugins folder of the Sample Unity project

<SideBySide class="grid grid-cols-2 gap-2">

<Image src="/static/books/pc-widget-unity/plugin-1.png" />

<Image src="/static/books/pc-widget-unity/plugin-2.png" />

</SideBySide>

### HSUnityWidget

This is a sample Unity project from which the final Unity package is created which can be integrated to other games.

**Output:** A .unitypackage file

Go to the Assests menu item and click on Export package

<Image src="/static/books/pc-widget-unity/export-package.png" width="half" />

Select the following files and click on Export ( Save it with any name )

<Image src="/static/books/pc-widget-unity/click-on-export.png" width="half" />
147 changes: 147 additions & 0 deletions docs/pc-widget-unity/configuration.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
---
sidebar_position: 50
title: Configuration
description: "Configuration options for Helpshift PC widget - Unity"
---

import {
Image
} from "@site/src/components/forDocs";


## Configuration

A configuration object has to be created, which should be passed to the `initialize` API.
Below are the configuration options that we have.

### Properties:
saga-hs marked this conversation as resolved.
Show resolved Hide resolved

**Domain** `(Required)`
- `Type`: string
- `Default`: string.Empty
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

""

Not string.Empty

- `Description`: Specifies the domain for the widget to operate.

**PlatformId** `(Required)`
- `Type`: string
- `Default`: string.Empty
- `Description`: Unique identifier for the platform.

**AppId** `(Required)`
- `Type`: string
- `Default`: string.Empty
- `Description`: Unique identifier for the application.

**WidgetType** `(Required)`
- `Type`: string
- `Default`: `helpcenter_and_webchat`
- `Description`: Defines the type of widget. Common options include `helpcenter_and_webchat`,`helpcenter` and `webchat`.

**UserId**
- `Type`: string
- `Default`: string.Empty
- `Description`: Identifier for the user interacting with the widget.

**UserName**
- `Type`: string
- `Default`: string.Empty
- `Description`: Name of the user.

**UserEmail**
- `Type`: string
- `Default`: string.Empty
- `Description`: Email address of the user.

**Language**
- `Type`: string
- `Default`: `en`
- `Description`: Language preference for the widget. Example: `en`, `fr`.

**ConversationPrefillText**
- `Type`: string
- `Default`: string.Empty
- `Description`: Prefill text for initiating a conversation.

**InitialUserMessage**
- `Type`: string
- `Default`: string.Empty
- `Description`: Initial message displayed to the user.

**FullPrivacy**
- `Type`: bool
- `Default`: false
saga-hs marked this conversation as resolved.
Show resolved Hide resolved
- `Description`: Indicates if full privacy mode is enabled.

**InitiateChatOnLoad**
- `Type`: bool
- `Default`: false
- `Description`: Automatically initiate a chat when the widget loads.

**ClearAnonymousUserOnLogin**
- `Type`: bool
- `Default`: false
- `Description`: Clears anonymous user data upon login.

**EnableLogging**
- `Type`: bool
- `Default`: false
- `Description`: Enables logging for debugging purposes.

**Cifs**
- `Type`: bool
- `Default`: false
- `Description`: Configuration identifier for specific integrations.

**Tags**
- `Type`: `List<string>`
- `Default`: `new List<string>()`
- `Description`: A list of tags to associate with the widget.

**FaqId**
- `Type`: string
- `Default`: string.Empty
- `Description`: Identifier for a specific FAQ.

**SectionId**
- `Type`: string
- `Default`: string.Empty
- `Description`: Identifier for a specific section.

**ResizeMode**
- Type: ResizeMode
- Default: ResizeMode.SlimRight
- Description: Determines how the widget resizes. Example values include `ResizeMode.SlimRight`, `ResizeMode.SlimCenter`,`ResizeMode.SlimLeft`,`ResizeMode.WideCenter` and `ResizeMode.FullScreen`.

### Usage

```
saga-hs marked this conversation as resolved.
Show resolved Hide resolved
var config = new HelpshiftConfig
{
Domain = "mydomain",
PlatformId = "mydomain_platform_123",
AppId = "3",
WidgetType = "helpcenter_and_webchat",
////////////////////////////////////
saga-hs marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't the fields like Domain, PlatformId be in lowercase?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is because of the C sharp conventions

// Configure the rest of the required options
/////////////////////////////////////
};

// Pass the configuration to the initialize API
Helpshift.Initialize(Application.streamingAssetsPath,config);
saga-hs marked this conversation as resolved.
Show resolved Hide resolved

```

### Mode Previews
saga-hs marked this conversation as resolved.
Show resolved Hide resolved
**SlimRight ( Default )**
<Image src="/static/books/pc-widget-unity/preview-right.png" width="half" />

**SlimLeft**
<Image src="/static/books/pc-widget-unity/preview-left.png" width="half" />

**SlimCenter**
<Image src="/static/books/pc-widget-unity/preview-center.png" width="half" />

**WideCenter**
<Image src="/static/books/pc-widget-unity/preview-wide-center.png" width="half" />

**FullScreen**
<Image src="/static/books/pc-widget-unity/preview-fullscreen.png" width="half" />
57 changes: 57 additions & 0 deletions docs/pc-widget-unity/environment-setup.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
---
saga-hs marked this conversation as resolved.
Show resolved Hide resolved
sidebar_position: 10
title: Environment Setup
description: "Integrate Helpshift widget in the PC unity games"
---
import {
Image,
Intro,
Admonition
} from "@site/src/components/forDocs";

# Environment Setup {#environment-setup}

Environment setup is needed to integrate and build the Helpshift PC Widget in the Unity game.
Follow the below steps to set up the environment.
If environment setup is already done, you can skip this section and move to the next section.

## Requirements

### Operating System
- **Windows**:
- The setup has been tested on **Windows 11** using a custom Windows SDK that supports notifications.
- Compatibility with Windows 10 has not been verified.
- Specific instructions are provided in the [Installation of required tools](#installation-of-required-tools) section.

### Unity
- **Developed on**: Unity 2022.3.42f1
- **Tested on**: Latest Unity 6 versions
- **Additional Testing**: Validation is needed on previous Unity LTS versions for compatibility.

---

## Installation of required tools


1. **Install Visual Studio 2022**
During installation, include the following workloads:

<div style={{ display: 'flex', justifyContent: 'space-between', gap: '20px' }}>
<Image src="/static/books/pc-widget-unity/vs-studio-dot-net.png" width="half" />
<Image src="/static/books/pc-widget-unity/vs-studio-game-dev.png" width="half" />
</div>

<Admonition type="info" title="Note">
If it’s not already installed, include the .NET 8.0 Runtime from the Individual Components section.
</Admonition>


2. **Install the Windows 11 SDK**
Make sure to add the **Windows 11 SDK (10.0.26100.0)** from the Individual Components section:

<Image src="/static/books/pc-widget-unity/vs-studio-win-sdk-11.png" width="quarter" centered />



Ensure all dependencies are properly installed before proceeding to the next steps in the setup.

19 changes: 19 additions & 0 deletions docs/pc-widget-unity/integration.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
sidebar_position: 30
title: Integration
description: "Integrate Helpshift PC widget in the PC unity games"
---
import {
Image
} from "@site/src/components/forDocs";

# Integration

When in a game, we can import the package using Assets -> Import Package -> Custom Package

<Image src="/static/books/pc-widget-unity/integrate-1.png" width="half" />

Import all the files from the package into the project

<Image src="/static/books/pc-widget-unity/integrate-2.png" width="half" />
This approach is the standard approach, where the game developers will have control over the widget's life cycle using the set of API's that are provided.
saga-hs marked this conversation as resolved.
Show resolved Hide resolved
saga-hs marked this conversation as resolved.
Show resolved Hide resolved
8 changes: 8 additions & 0 deletions src/data/homeSections.json
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,14 @@
"title": "New",
"colorClasses": "bg-green-500 text-white"
}
},
{
"title": "PC Widget - Unity",
"image": "/img/unity.png",
"link": "/pc-widget-unity",
"alt": "pc-widget-unity",
"description": "Integrate Helpshift widget in the PC unity games",
"color": "from-fuchsia-600 to-fuchsia-800"
}
]
},
Expand Down
Loading