-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* PLuG SDK * added slug * slug * PLuG links * add remaining pages * Update sdk-intro.mdx * fix * code blocks * Update fern/docs/pages/plug-sdk/sdk-intro.mdx Co-authored-by: Ben Colborn <[email protected]> * Add files via upload * Rename fern/plug-demo.gif to fern/img/plug-demo.gif * Add files via upload * Delete fern/img/plug-demo.gif * Update sdk-intro.mdx --------- Co-authored-by: Ben Colborn <[email protected]>
- Loading branch information
1 parent
9311e5a
commit dddddc1
Showing
9 changed files
with
633 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| PLuG has a completely [no-code way](https://docs.devrev.ai/plug/customize#branding-style-and-layout) of changing the look and interaction of your widget. In case you wish to make your PLuG widget more interactive and customized to how your app is structured, you can use these customization properties to set up your widget. | ||
|
|
||
| <Callout intent="info"> | ||
| If you have customized these properties of the widget through the PLuG settings page of DevRev, the values set in the initalization code take priority over those which you have updated in your PLuG settings. | ||
| </Callout> | ||
|
|
||
| All of these properties have to be passed as parameters while initializing the PLuG widget using `plugSDK.init()`. For details, refer to the PLuG SDK [methods documentation](./methods). | ||
|
|
||
| | Customization | Description | | ||
| | -------------------------- | ----------------------------------------------------------------------------------------- | | ||
| | `custom_launcher_selector` | Customize the widget launcher to best fit your website or app. | | ||
| | `widget_alignment` | Align the widget to be placed either on the left or right side, relative to the launcher. | | ||
| | `enable_default_launcher` | Show/hide the default PLuG Widget launcher. | | ||
| | `theme` | Set the theme of the PLuG Widget. | | ||
|
|
||
| ## Code sandbox | ||
|
|
||
| <iframe src="https://codesandbox.io/embed/cusotmized-plug-ggl2m3?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.js&theme=dark&view=preview&hidedevtools=1" | ||
| style={{width:'100%', height:'600px', border:'0', borderRadius: '4px', overflow:'hidden'}} | ||
| title="CUSOTMIZED_PLUG" | ||
| allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" | ||
| sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" | ||
| ></iframe> | ||
|
|
||
| ## Properties | ||
|
|
||
| ### PLuG launcher | ||
|
|
||
| Customize the widget launcher to best fit your website or app; or show or hide the default PLuG widget launcher. | ||
|
|
||
| To customize your PLuG launcher styles, specify the CSS selector in the `custom_launcher_selector` property. This CSS selector is the reference based on which your PLuG widget opens. This property accepts a string value. The selector can also be configured through the plug settings on app.devrev.ai. | ||
|
|
||
| ```jsx | ||
| custom_launcher_selector?: '#my-plug-widget' | ||
| ``` | ||
|
|
||
| Use the `enable_default_launcher` property only if you are not using the custom launcher selector. | ||
|
|
||
| ```jsx | ||
| enable_default_launcher?: boolean; | ||
| ``` | ||
|
|
||
| The default value is `true`. | ||
|
|
||
| ### Widget alignment | ||
|
|
||
| Align the widget to be placed on the left or right of the launcher. | ||
|
|
||
| The widget can be set to open to the left or to the right of the custom launcher. | ||
|
|
||
| ```jsx | ||
| widget_alignment?: 'left' | 'right'; | ||
| ``` | ||
|
|
||
| The default value is `right`. | ||
|
|
||
| ### Spacing | ||
|
|
||
| Adjust spacing of the PLuG widget. | ||
|
|
||
| Two properties are available to apply spacing. | ||
|
|
||
| - The `bottom` property determines the padding from the bottom of the launcher. | ||
|
|
||
| The default value is `10px`. | ||
|
|
||
|
|
||
| - The `side` property determines the spacing of the widget from the launcher icon. | ||
|
|
||
| The default value is `0px`. | ||
|
|
||
|
|
||
| ```jsx | ||
| spacing?:{ | ||
| bottom?: '10px', | ||
| side?:'10px', | ||
| } | ||
| ``` | ||
|
|
||
| <iframe src="https://codesandbox.io/embed/customisation-spacing-xgl24n?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fspacing.js&theme=dark&view=preview&hidedevtools=1" | ||
| style={{width:'100%', height:'600px', border:'0', borderRadius: '4px', overflow:'hidden'}} | ||
| title="customisation_spacing" | ||
| allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" | ||
| sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" | ||
| ></iframe> | ||
|
|
||
| ### Light/dark theme | ||
|
|
||
| Set the theme of the PLuG widget. | ||
|
|
||
| ```jsx | ||
| theme?: 'dark' | 'light'; | ||
| ``` | ||
|
|
||
| The default value is `light`. | ||
|
|
||
| <iframe src="https://codesandbox.io/embed/theme-changer-sdflmz?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.js&theme=dark&view=preview&hidedevtools=1" | ||
| style={{width:'100%', height:'600px', border:'0', borderRadius: '4px', overflow:'hidden'}} | ||
| title="THEME_CHANGER" | ||
| allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" | ||
| sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" | ||
| ></iframe> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,147 @@ | ||
| This guide will help you to integrate PLuG using DevRev SDK with your Android app. | ||
|
|
||
| ## Requirements | ||
|
|
||
| - Android Studio 2022.1.1 | ||
| - Android Gradle plugin version 7.4 | ||
| - Gradle version 7.6 | ||
| - Minimum Android SDK 29 | ||
|
|
||
| ## Setup | ||
|
|
||
| To integrate the latest version of our SDK into your app, follow these steps: | ||
|
|
||
| 1. Open your app's `build.gradle.kts` file and add the following dependencies to get the latest version of our SDK: | ||
|
|
||
| ```kotlin | ||
| dependencies { | ||
| implementation("ai.devrev.sdk:core:<version>") | ||
| } | ||
| ``` | ||
|
|
||
| 2. To access our SDK, hosted on mavenCentral, add it to your root's `build.gradle.kts` file. | ||
|
|
||
| ```kotlin | ||
| repositories { | ||
| mavenCentral() | ||
| } | ||
| ``` | ||
|
|
||
| After completing these steps in your `build.gradle.kts` script, you should be able to import and use the DevRev SDK in your Android application. | ||
|
|
||
| ## Setting up the DevRev SDK | ||
|
|
||
| ### Obtain credentials | ||
|
|
||
| 1. In DevRev, go to **Settings > Support > PLuG Tokens** through the settings icon in the top-left corner. | ||
|
|
||
| 2. Under the **App Credentials** section, generate the necessary credentials for SDK usage. Remember to save both the **App ID** and **App Secret** as they are required in SDK configuration. | ||
|
|
||
| 3. Acquire the **Your Unique App ID** (referred to as `supportID` in the code) by visiting the **PLuG Settings** page. | ||
|
|
||
| ### Initialization | ||
|
|
||
| After you've obtained the necessary credentials, proceed to configure the DevRev SDK within your app. | ||
|
|
||
| 1. To configure the SDK, invoke the following method inside your `Application` class: | ||
|
|
||
| ```kotlin | ||
| fun DevRev.configure( | ||
| context: Context, | ||
| appID: String, | ||
| secret: String, | ||
| supportId: String | ||
| ) | ||
| ``` | ||
|
|
||
| 2. If you don't have a custom `Application` class, create one as shown below: | ||
|
|
||
| ```kotlin | ||
| import ai.devrev.sdk.DevRev | ||
|
|
||
| class FooApplication : Application() { | ||
|
|
||
| override fun onCreate() { | ||
| super.onCreate() | ||
| DevRev.configure( | ||
| context = this, | ||
| appId = "<APP_ID>", | ||
| secret = "<SECRET>", | ||
| supportId = "<SUPPORT_ID>", | ||
| ) | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| 3. In the `onCreate` method of your application, configure the DevRev SDK using the credentials obtained earlier. | ||
|
|
||
| 4. Ensure that the custom application is specified in the `AndroidManifest.xml`, as shown below: | ||
|
|
||
| ``` | ||
| <application | ||
| android:name=".FooApplication"> | ||
| </application> | ||
| ``` | ||
|
|
||
| ### User identification | ||
|
|
||
| Before initiating the chat feature, user identification is required. Mobile applications can submit various arguments to identify the user. The following example adopts a simplistic approach, providing the minimum required arguments for successful user identification: | ||
|
|
||
| ```kotlin | ||
| DevRev.identify( | ||
| userIdentification = UserIdentification(userId = "[email protected]") | ||
| ) | ||
| ``` | ||
|
|
||
| Upon completing user identification, the chat dialog (conversations) supported by the DevRev SDK becomes accessible. | ||
|
|
||
| To open the chat dialog, the application should utilize the `showSupport` API, as shown below: | ||
|
|
||
| ```kotlin | ||
| DevRev.showSupport(context: Context) | ||
| ``` | ||
|
|
||
| ### Support button | ||
|
|
||
| The mobile SDK also offers a support button that can be integrated into your application. To include it on the current screen, add the following code to your XML layout: | ||
|
|
||
| ``` | ||
| <ai.devrev.sdk..view.FloatingActionButton | ||
| android:id="@+id/_fab" | ||
| android:layout_width="wrap_content" | ||
| android:layout_height="wrap_content" | ||
| android:layout_margin="24dp" | ||
| app:layout_constraintBottom_toBottomOf="parent" | ||
| app:layout_constraintEnd_toEndOf="parent" /> | ||
| ``` | ||
|
|
||
| The support button accepts default parameters like: | ||
|
|
||
| ```kotlin | ||
| android:src="@your_drawable_here" | ||
| ``` | ||
|
|
||
| or | ||
|
|
||
| ```kotlin | ||
| android:backgroundTint="@your_background_color" | ||
| ``` | ||
|
|
||
| This allows customization according to your preferences. The button appears on your screen. | ||
|
|
||
| At this stage, you should be able to run the app and leverage all the features of the DevRev SDK. Clicking the **Support** button navigates the user to the chat interface. | ||
|
|
||
| ## Sample app | ||
|
|
||
| The examples presented in this document are taken from the DevRev SDK sample app. The sample app showcases both functional and XML implementations and is included as part of the [repository](https://github.com/devrev/devrev-sdk-android). It's recommended to run the sample app before integrating the SDK into your target application. | ||
|
|
||
| ## Troubleshooting | ||
|
|
||
| - **Issue**: Encountering problems with DevRev SDK integration. | ||
| **Solution**: Verify the correct SDK dependency setup in the project. Ensure mavenCentral is accessible from the IDE, and confirm accurate detection of the selected DevRev PLuG SDK version. | ||
|
|
||
| - **Issue**: The `showSupport()` function or XML button is unresponsive. | ||
| **Solution**: Confirm that user identification is performed before using the `showSupport()` function or XML button. | ||
|
|
||
| - **Issue**: Incorrect operation due to `App ID` and `secret` misconfiguration. | ||
| **Solution**: Ensure correct functionality by double-checking that both `App ID` and `secret` values are accurately configured in your application or sample app. |
Oops, something went wrong.