> For the complete documentation index, see [llms.txt](https://penida.gitbook.io/orka-livechat/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://penida.gitbook.io/orka-livechat/how-to-add-orka-.../how-to-add-orka-on-your-shopify-app.md).
# 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
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://penida.gitbook.io/orka-livechat/how-to-add-orka-.../how-to-add-orka-on-your-shopify-app.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.