# How to add Orka on your Shopify app
## Orka Chat Integration Documentation for Shopify
This documentation explains how to integrate the Orka chat widget into your Shopify application. Choose the integration method based on your development framework.
👉[Click here if you want to see how to add Orka Live chat if you've built your Shopify app **using Remix**](#integration-with-remix)
👉[Click here if you have **not used Remix**](#standard-integration-without-remix)
***
### Integration with Remix
If you built your application with Remix, you have two integration options:
#### Option 1: Using npm package (Recommended)
This approach uses Orka's official npm package and provides better integration with Remix.
1. Install the package via npm:
```bash
npm install orka-web-sdk
```
2. Create a new `OrkaChat.tsx` component:
```tsx
import { useEffect } from 'react';
const OrkaChat = () => {
useEffect(() => {
import('orka-web-sdk').then((Orka) => {
Orka.default.configure('YOUR_APP_ID');
});
});
return null;
};
export default OrkaChat;
```
3. Integrate the component in your pages:
```tsx
import OrkaChat from './components/OrkaChat';
export default function MyPage() {
return (
{/* Your content */}
);
}
```
#### Option 2: Script Integration
This approach uses the script directly in your `root.tsx` file.
1. Add the script to your `App` component in `root.tsx`:
```tsx
export default function App() {
return (
);
}
```
***
### Standard Integration (Without Remix)
If you're not using Remix, you have several options for integrating the Orka widget:
#### Basic Integration
Add the following script to the `` section of your HTML:
```html
```
#### Auto-Loading Configuration
By default, the widget loads automatically when the script is included. You can prevent this automatic loading by setting the ORKA\_LOAD option to false:
```javascript
window.ORKA_LOAD = false;
```
If you disable auto-loading, you'll need to initialize the widget manually:
```javascript
window.Orka.load("YOUR_APP_ID", "appType");
```
* `YOUR_APP_ID`: Replace with your application ID
* `appType`: (Optional) Specify "Shopify" or "Standalone"
#### Single Page Application Integration
If you're using a Single Page Application (SPA), you can use the npm package:
1. Install the package:
```bash
npm install orka-web-sdk
```
2. Initialize the widget:
```javascript
import { Orka } from "orka-web-sdk";
Orka.configure("[YOUR PROJECT ID]");
```
#### Session Configuration
You can configure session data for any integration method:
```javascript
window.ORKA_SESSION = {
name: "John Doe",
email: "john.doe@example.com"
};
```
**Important**: Insert the ORKA\_SESSION configuration before the main Orka script.
### API Methods
#### update(data)
Updates the session data for the chat widget.
```javascript
window.Orka.update({
userName: "John Doe",
email: "john.doe@example.com",
theme: "dark"
});
```
#### reset()
Resets the chat session and updates context information.
```javascript
window.Orka.reset();
```
* Closes the current chat
* Sends the current page's title and URL as context
#### toggle()
Toggles the widget visibility.
```javascript
window.Orka.toggle();
```
#### show(message)
Opens the chat widget with an optional pre-filled message.
```javascript
window.Orka.show("Hello! I need help with my order.");
```
#### hide()
Closes the chat widget.
```javascript
window.Orka.hide();
```
#### destroy()
Removes the widget instance from the page.
```javascript
window.Orka.destroy();
```
### Complete Integration Example
Here's a full example showing how to integrate the widget with various features:
```html
Orka Chat Integration
```
### Troubleshooting
#### Common Issues
1. **Widget not loading**:
* Verify that the SDK script URL is correct
* Check that your APP\_ID is valid
* Ensure the script is loaded after the DOM
* Check if auto-loading is disabled (ORKA\_LOAD = false)
2. **API calls failing**:
* Check the browser console for errors
* Make sure the widget is fully initialized before calling methods
* Verify that methods are called after DOM content is loaded