[{"value":"Installation","id":"installation","hLevel":2,"level":1},{"value":"Usage","id":"usage","hLevel":2,"level":1,"children":[{"value":"Initialization","id":"initialization","hLevel":3,"level":2},{"value":"Parameter description","id":"parameter-description","hLevel":3,"level":2},{"value":"Example","id":"example","hLevel":3,"level":2}]}]

Get started

This article describes how to install and use App Bridge.

Installation

Run the following command to install App Bridge:

# npm
npm install @shoplineos/app-bridge
# yarn
yarn add @shoplineos/app-bridge
# pnpm
pnpm add @shoplineos/app-bridge

Usage

Initialization

You must initialize App Bridge on the client side to enable communication with the SHOPLINE Admin.

import Client, { shared } from '@shoplineos/app-bridge';
const app = Client.createApp({
  appKey: 'your-app-key', // Replace with your actual appKey
  host: shared.getHost(),
});

CAUTION

Apps using the SHOPLINE App Bridge SDK must be embedded apps (all apps embedded within the SHOPLINE Admin are embedded apps).

Parameter description

createApp method: Used to initialize App Bridge.

Parameter	Type	Description	Required
appKey	string	The unique identifier of the app.	Yes
host	string	The domain name of the store. Format: `{handle}.myshopline.com`.	Yes

TIPS

The appKey must match the appKey of the current app. Otherwise, API calls will fail.
It is recommended to use shared.getHost() to automatically obtain the host parameter.

Example

After initialization is complete, you can call the various features provided by App Bridge. Below is an example of calling the Modal component:

import Client, { Modal, shared, ModalProps } from '@shoplineos/app-bridge';
// Complete initialization.
const app = Client.createApp({
  appKey: 'your-app-key',
  host: shared.getHost(),
});
// Call the Modal component.
const modalProps: ModalProps = {
  type: 'confirm',
  title: 'Hello SHOPLINE',
  content: 'Welcome to SHOPLINE',
};
Modal.create(app).open(modalProps);