InAppStory

https://docs.inappstory.com
Admin
InAppStory is a platform for creating and managing interactive in-app stories and messaging...
Tokens:285,734
Snippets:2,531
Trust Score:7.9
Update:6 months ago
Show doc for...
Tokens:
Raw
### Run Installation Script

Source: https://docs.inappstory.com/on-premise

Execute the installation script to initialize the environment.

```bash
./install.sh
```

--------------------------------

### Story View Configuration Examples

Source: https://docs.inappstory.com/sdk-guides/js-sdk/story-view.html

Examples demonstrating how to configure the Story View backdrop settings.

```APIDOC
## Story View Configuration Examples

### Copy of default config
```javascript
appearanceManager.setStoryReaderOptions({
  commonBackdrop: {
    color: "rgba(51, 51, 51, 1)",
    backdropFilter: null,
  },
  slideBackdrop: {
    opacity: 0.56,
    blur: 30,
    linearGradientOverlay: ["rgba(0, 0, 0, 0.1) 0%", "rgba(0, 0, 0, 0.9) 100%"]
  },
});
```

### Translucent config without slide based backdrop image
```javascript
appearanceManager.setStoryReaderOptions({
  commonBackdrop: {
    color: "rgba(51, 51, 51, .8)",
    backdropFilter: null,
  },
  slideBackdrop: {
    opacity: 0,
    blur: 30,
    linearGradientOverlay: ["rgba(0, 0, 0, 0.1) 0%", "rgba(0, 0, 0, 0.9) 100%"]
  },
});
```
```

--------------------------------

### Example Usage

Source: https://docs.inappstory.com/sdk-guides/js-sdk/widget-goods.html

An example demonstrating how to set up and configure the Goods widget using the AppearanceManager.

```APIDOC
## Example

```javascript
const appearanceManager = new window.IAS.AppearanceManager();

appearanceManager.setGoodsWidgetOptions({
  goodsWidgetRenderingType: "default",
  goodsList: {
    renderingType: "default",
    substrateHeight: 200,
    closeBackgroundColor: "gray",
  },
  goodsCard: {
    titleFont: 'bold 1rem "TT Commons"',
    priceFont: 'bold 1rem "TT Commons"',
    oldPriceFont: 'bold 1rem "TT Commons"',
    imageBackgroundColor: "#0C62F3",
  },
  itemClickHandler: (goods) => console.log(goods.sku),
  openGoodsWidgetHandler: (goodsList) =>
    Promise.resolve(
      goodsList.map((goods) => ({
        ...goods,
        title: "Title",
        subTitle: "Description",
        price: "999",
        oldPrice: "1999",
      }))
    ),
});
```
```

--------------------------------

### UGCStoriesList Example

Source: https://docs.inappstory.com/ugc-guides/web-ugc.html

Example demonstrating how to initialize and use the UGCStoriesList, including subscribing to public events.

```APIDOC
## UGCStoriesList Example

### Initialization and Event Subscription
```javascript
// StoryManager singleton instance
const inAppStoryManager = new window.IAS.InAppStoryManager(storyManagerConfig);

// AppearanceManager instance
const appearanceManager = new window.IAS.AppearanceManager();

// List instance
const storiesList = new storyManager.UGCStoriesList(
  "#stories_widget",
  appearanceManager,
  { filter: { prop1: "a", prop2: "b" } }
);

// Subscribe to events
const publicEvents = [
  "feedLoad",
  "feedImpression",
  "visibleAreaUpdated",
  "clickOnStory",
  "showSlide",
  "showStory",
  "closeStory",
  "likeStory",
  "dislikeStory",
  "favoriteStory",
  "shareStory",
  "shareStoryWithPath",
  "clickOnFavoriteCell",
];
publicEvents.forEach((eventName) =>
  storyManager.on(eventName, (payload) =>
    console.log("event", eventName, payload)
  )
);

// Payload structure for events
type Payload = {
  id: number;
  index: number;
  isDeeplink: boolean;
  title: string;
  slidesCount: number;
  feed: null;
  filter: Record<string, unknown>;
  source: "list";
  ugcPayload: Record<string, unknown>;
};
```
```

--------------------------------

### Example Onboarding Response

Source: https://docs.inappstory.com/sdk-guides/js-sdk/onboardings.html

This is an example of the JSON response when onboarding stories are successfully displayed. It includes an array of story objects, each with an ID and title.

```json
{
  "stories": [
    { "id": 1, "title": "Welcome to Our App" },
    { "id": 2, "title": "How to Use Features" }
  ]
}

```

--------------------------------

### React UgcSdk Example

Source: https://docs.inappstory.com/ugc-guides/web-ugc.html

Example demonstrating the integration of React UgcSdk, including setting up the StoryManager, AppearanceManager, UGCStoriesList, and using the UgcEditor component.

```APIDOC
## React UgcSdk Example

### Integration
```javascript
import { UgcEditor, UgcSdk } from "@inappstory/react-ugc-sdk";

const storyManagerConfig = {
  apiKey: "{project-integration-key}",
  userId: "{user-identifier}", // usually - hash from real user identifier
};

// StoryManager singleton instance
const inAppStoryManager = new window.IAS.InAppStoryManager(storyManagerConfig);

// AppearanceManager instance
const appearanceManager = new window.IAS.AppearanceManager();

const storiesList = new storyManager.UGCStoriesList(
  "#stories_widget",
  appearanceManager,
  {
    filter: {},
    useUgcCard: true,
  }
);

// Payload for ugc editor (pass to created story)
const ugcPayload = { prop1: "test", prop2: "test2" };

// Available since ugc-sdk v1.1.0
const ugcCardClickHandler = () => UgcSdk.showEditor(storyManager, ugcPayload);

// Set ugc card click handler
// Available since js-sdk v2.9.0
storiesList.ugcCardClickHandler = ugcCardClickHandler;

function App() {
  return (
    <div className="App">
      {/* Container for UgcSdk screen */}
      <UgcEditor safeAreaInsets={{ top: 0, bottom: 0 }} />
    </div>
  );
}
```
```

--------------------------------

### Install InAppStory SDK via NPM

Source: https://docs.inappstory.com/sdk-guides/js-sdk/how-to-get-started.html

Command to install the SDK package.

```bash
npm install @inappstory/js-sdk
```

--------------------------------

### Start Services

Source: https://docs.inappstory.com/on-premise

Launch the application containers in detached mode.

```bash
docker compose up -d
```

--------------------------------

### Onboarding Response Formats

Source: https://docs.inappstory.com/sdk-guides/react-sdk/onboardings.html

Example JSON responses returned by the showOnboardingStories promise.

```json
{
  "stories": [
    { "id": 1, "title": "Welcome to Our App" },
    { "id": 2, "title": "How to Use Features" }
  ]
}
```

```json
{
  "stories": []
}
```

--------------------------------

### Install @inappstory/react-sdk

Source: https://docs.inappstory.com/sdk-guides/react-sdk/banners.html

Install the SDK using npm. Ensure you are using version 1.8.0 or higher for banner plugin compatibility.

```bash
npm install @inappstory/react-sdk

```

--------------------------------

### Install and Import Web Component Polyfills

Source: https://docs.inappstory.com/sdk-guides/react-sdk/es5-compatible.html

Install `@webcomponents/webcomponentsjs` and `core-js` using npm. Import the necessary polyfills at the beginning of your application's entry file.

```javascript
npm install @webcomponents/webcomponentsjs core-js --save
```

```javascript
import 'core-js/stable';
import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';
```

--------------------------------

### React UgcSdk Installation

Source: https://docs.inappstory.com/ugc-guides/web-ugc.html

Instructions for installing the React UgcSdk package using npm, yarn, or pnpm.

```APIDOC
## React UgcSdk Installation

### Package Manager

**Using npm:**
```bash
$ npm install @inappstory/react-ugc-sdk
```

**Using yarn:**
```bash
$ yarn add @inappstory/react-ugc-sdk
```

**Using pnpm:**
```bash
$ pnpm add @inappstory/react-ugc-sdk
```

### Importing
Once the package is installed, you can import the library using the `import` approach:
```javascript
import { UgcEditor, UgcSdk } from "@inappstory/react-ugc-sdk";
```
```

--------------------------------

### Comprehensive Example with Text and Image Placeholders

Source: https://docs.inappstory.com/sdk-guides/react-sdk/placeholders.html

This example demonstrates the combined usage of `placeholders` for text and `imagePlaceholders` for images within the `IASContainer` configuration.

```typescript
import { IASContainer } from "@inappstory/react-sdk";

export const App = () => {
  return (
    <IASContainer
      config={{
        apiKey: "{projectToken}",
        placeholders: {
          "user-name": "Alex",
          "city": "New York",
          "bonus-points": "150"
        },
        imagePlaceholders: {
          "profile-photo": "https://example.com/images/user123.png",
          "promo-banner": "https://example.com/images/sale.png"
        }
      }}
    />
  );
};

```

--------------------------------

### Checkout Integration Example

Source: https://docs.inappstory.com/sdk-guides/react-sdk/checkout.html

A basic example demonstrating how to integrate the Checkout feature into your application.

```APIDOC
## Example
```javascript
import { IASContainer } from "@inappstory/react-sdk";
import { useEffect } from "react";

export const App = () => {
    useEffect(() => {
        let offersById = {};

        const handleCartUpdated = ({ offer, onSuccess, onError }) => {
            try {
                if (offersById[offer.offerId]) {
                    offersById[offer.offerId].quantity += offer.quantity;
                } else {
                    offersById[offer.offerId] = offer;
                }

                onSuccess({
                    offers: Object.values(offersById)
                });
            } catch (e) {
                onError({ message: "Failed to update cart" });
            }
        };

        const handleCartClicked = () => {
            console.log("Cart clicked. Current offers:", Object.values(offersById));
        };

        const handleCloseStoryReader = () => {
            offersById = {};
        };

        storyManager.products.getProductCartState = async () => {
            return {
                offers: Object.values(offersById),
                price: "0",
                priceCurrency: ""
            };
        };

        storyManager.on("productCartUpdated", handleCartUpdated);
        storyManager.on("productCartClicked", handleCartClicked);
        storyManager.on("closeStoryReader", handleCloseStoryReader);

        return () => {
            storyManager.off("productCartUpdated", handleCartUpdated);
            storyManager.off("productCartClicked", handleCartClicked);
            storyManager.off("closeStoryReader", handleCloseStoryReader);
        };
    }, []);

    return <IASContainer config={{ apiKey: "{projectToken}" }} />
}
```
```

--------------------------------

### Install React InAppStory SDK

Source: https://docs.inappstory.com/sdk-guides/react-sdk/how-to-get-started.html

Use npm to install the React InAppStory SDK package.

```bash
npm install @inappstory/react-sdk
```

--------------------------------

### Initialize StoriesList Widget

Source: https://docs.inappstory.com/sdk-guides/js-sdk/feeds.html

Basic setup for the stories container and SDK initialization.

```html
<div id="stories_widget"></div>
```

```javascript
import { AppearanceManager, InAppStoryManager } from "@inappstory/js-sdk";

const inAppStoryManager = new InAppStoryManager({ apiKey: "{projectToken}" });
const appearanceManager = new AppearanceManager();
const storiesList = new inAppStoryManager.StoriesList(
        "#stories_widget",
        appearanceManager,
        { feed: "default" }
    );
```

--------------------------------

### UGC Installation Methods

Source: https://docs.inappstory.com/ugc-guides/ios-ugc.html

Instructions for integrating the InAppStory UGC SDK into your Xcode project using CocoaPods, Carthage, Swift Package Manager, or manual installation.

```APIDOC
## UGC Installation

### CocoaPods
Specify the following in your `Podfile`:
```
use_frameworks!
pod 'InAppStoryUGC', :git => 'https://github.com/inappstory/ios-ugc-sdk.git', :tag => '1.3.4'
```

### Carthage
Specify the following in your `Cartfile`:
```
github "inappstory/ios-ugc-sdk" ~> 1.3.4
```

### Swift Package Manager
Add the following to your `Package.swift` dependencies:
```
dependencies: [
    .package(url: "https://github.com/inappstory/ios-ugc-sdk.git", .upToNextMajor(from: "1.3.4"))
]
```

### Manual installation
Download `InAppStoryUGC.xcframework` from the repository and connect it in the project settings on the _General_ tab.
```

--------------------------------

### React UgcSdk Integration Example

Source: https://docs.inappstory.com/ugc-guides/web-ugc.html

A comprehensive example demonstrating the integration of React UgcSdk within a React application. It includes setting up InAppStoryManager, AppearanceManager, UGCStoriesList, and configuring the UgcEditor and UGC card click handler.

```javascript
import { UgcEditor, UgcSdk } from "@inappstory/react-ugc-sdk";

const storyManagerConfig = {
  apiKey: "{project-integration-key}",
  userId: "{user-identifier}", // usually - hash from real user identifier
};

// StoryManager singleton instance
const inAppStoryManager = new window.IAS.InAppStoryManager(storyManagerConfig);

// AppearanceManager instance
const appearanceManager = new window.IAS.AppearanceManager();

const storiesList = new storyManager.UGCStoriesList(
  "#stories_widget",
  appearanceManager,
  {
    filter: {},
    useUgcCard: true,
  }
);

// payload for ugc editor (pass to created story)
const ugcPayload = { prop1: "test", prop2: "test2" };
// available since ugc-sdk v1.1.0
const ugcCardClickHandler = () => UgcSdk.showEditor(storyManager, ugcPayload);

// set ugc card click handler
// available since js-sdk v2.9.0
storyList.ugcCardClickHandler = ugcCardClickHandler;

function App() {
  return (
    <div className="App">
      // Container for UgcSdk screen
      <UgcEditor safeAreaInsets={{ top: 0, bottom: 0 }} />
    </div>
  );
}

```

--------------------------------

### Install React UgcSdk using npm

Source: https://docs.inappstory.com/ugc-guides/web-ugc.html

Command to install the React UgcSdk package using npm. This is the first step to integrate the SDK into a React application.

```bash
$ npm install @inappstory/react-ugc-sdk

```

--------------------------------

### Event Subscription Example

Source: https://docs.inappstory.com/sdk-guides/js-sdk/events.html

Demonstrates how to initialize InAppStoryManager and subscribe to events like 'clickOnStory'.

```APIDOC
## Event Subscription Example

### Description
This example shows how to initialize the `InAppStoryManager` and subscribe to various events emitted by the SDK.

### Method
`InAppStoryManager.on(eventName, callback)`

### Endpoint
N/A (Client-side SDK)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
import { InAppStoryManager } from "@inappstory/js-sdk"

const inAppStoryManager = new InAppStoryManager({ apiKey: "{projectToken}" });
inAppStoryManager.on("clickOnStory", (payload) => console.log(payload));
```

### Response
N/A (Event-driven, no direct response)

### Error Handling
N/A
```

--------------------------------

### Trigger Onboarding with Custom Feed

Source: https://docs.inappstory.com/sdk-guides/react-sdk/onboardings.html

Example of calling the onboarding method with a specific feed identifier.

```typescript
storyManager.showOnboardingStories({ feed: "new-user" }).then((result) => {
    console.log("Displayed stories:", result.stories);
});
```

--------------------------------

### Import React UgcSdk Components

Source: https://docs.inappstory.com/ugc-guides/web-ugc.html

Example of importing the UgcEditor and UgcSdk components from the installed @inappstory/react-ugc-sdk package. This is necessary for using the SDK in React components.

```javascript
import { UgcEditor, UgcSdk } from "@inappstory/react-ugc-sdk";

```

--------------------------------

### Integrate InAppStory Widget via NPM

Source: https://docs.inappstory.com/sdk-guides/js-sdk/how-to-get-started.html

Example of initializing the SDK and mounting the stories widget to a DOM element.

```html
<div id="stories_widget"></div>
```

```javascript
import { AppearanceManager, InAppStoryManager } from "@inappstory/js-sdk";

const inAppStoryManagerConfig = {
  apiKey: "{project-integration-key}",
  userId: "{user-identifier}",
};

const inAppStoryManager = new InAppStoryManager(inAppStoryManagerConfig);
const appearanceManager = new AppearanceManager();
const storiesList = new inAppStoryManager.StoriesList(
  "#stories_widget",
  appearanceManager,
  {
    feed: "default",
  }
);
```

--------------------------------

### Create Success Data for Widget

Source: https://docs.inappstory.com/sdk-guides/android/home-screen-widget.html

Example function to prepare and display data when a successful story list is received. It involves getting widget IDs, creating a RemoteViews object, and setting up an intent for the service.

```java
void createSuccessData(final Context context) {
    ComponentName thisAppWidget = new ComponentName(
            context.getPackageName(), getClass().getName());
    final AppWidgetManager appWidgetManager = AppWidgetManager
            .getInstance(context);
    final int appWidgetIds[] = appWidgetManager.getAppWidgetIds(thisAppWidget);
    for (int i = 0; i < appWidgetIds.length; ++i) {

        Intent intent = new Intent(context, StoriesWidgetService.class);
        intent.putExtra(AppWidgetManager.EXTRA_APPWIDGET_ID, appWidgetIds[i]);

        RemoteViews rv = new RemoteViews(context.getPackageName(), R.layout.cs_widget_stories_list);

        intent.setData(Uri.parse(intent.toUri(Intent.URI_INTENT_SCHEME)));

```

--------------------------------

### Handle Context in onItemClick for Older Versions

Source: https://docs.inappstory.com/sdk-guides/android/widget-goods.html

This example demonstrates how to correctly handle the Context when implementing onItemClick for versions prior to 1.17.0. It requires passing the application context during instantiation and adding the FLAG_ACTIVITY_NEW_TASK flag when starting a new activity.

```kotlin
class MyCustomGoodsWidget(private val context: Context) : ICustomGoodsWidget {

    override fun getWidgetView(context: Context): View {
        TODO("Not yet implemented")
    }

    override fun getItem(): ICustomGoodsItem {
        return SimpleCustomGoodsItem()
    }

    override fun getWidgetAppearance(): IGoodsWidgetAppearance {
        TODO("Not yet implemented")
    }

    override fun getDecoration(): RecyclerView.ItemDecoration {
        TODO("Not yet implemented")
    }

    override fun getSkus(
        widgetView: View?,
        skus: ArrayList<String>,
        callback: GetGoodsDataCallback
    ) {
        callback.onSuccess(getGoodsItemDataFromSkus())
    }

    override fun onItemClick(
        widgetView: View?,
        goodsItemView: View,
        goodsItemData: GoodsItemData,
        callback: GetGoodsDataCallback
    ) {
        val myGoodActivity = Intent(context, MyGoodActivity::class.java)
        myGoodActivity.putExtras(getBundleFromGoodsItemData(data))
        /**
         * !!! For application context you have to add FLAG_ACTIVITY_NEW_TASK
         */
        myGoodActivity.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
        context.startActivity(myGoodActivity)
    }
}
```

--------------------------------

### Full HTML Example with Banner Initialization

Source: https://docs.inappstory.com/sdk-guides/js-sdk/banners.html

A complete HTML page demonstrating the integration and initialization of the InAppStory SDK and Banners Plugin.

```html
<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <script
      defer
      src="https://cdn.inappstory.com/sdk/v3.10.3/dist/js/IAS.js"
    ></script>
</head>
  <body>
    <div id="ias-banner-place-widget"></div>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const inAppStoryManager = new IAS.InAppStoryManager({
          apiKey: "{project-integration-key}",
        });

         const bannerPlace = inAppStoryManager.banners.mountBannerCarousel(
                        "#ias-banner-place-widget", {
                            placeId: bannerPlaceId,
                            appearance: {}
                        }
                    );
      })
    </script>
  </body>
</html>
```

--------------------------------

### Configure and Open Game with HTML Integration

Source: https://docs.inappstory.com/sdk-guides/js-sdk/games.html

This HTML and JavaScript example demonstrates initializing the InAppStory SDK, configuring game reader options, opening a game, and setting up event listeners for game lifecycle events.

```html
<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
</head>
<html>
  <body>
    <script defer src="https://cdn.inappstory.com/sdk/v3.10.3/dist/js/IAS.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const inAppStoryManagerConfig = {
          apiKey: "{project-integration-key}",
        };

        const inAppStoryManager = new window.IAS.InAppStoryManager(inAppStoryManagerConfig);
        const appearanceManager = new window.IAS.AppearanceManager();
        appearanceManager.setGameReaderOptions({ /* your appearance options*/});
        inAppStoryManager.openGame("{game-id}", appearanceManager).catch(console.error)

        ["startGame", "finishGame", "closeGame"].forEach((eventName) =>
          inAppStoryManager.on(eventName, (payload) =>
            console.log("event", eventName, payload)
          )
        );
      });
    </script>
  </body>
</html>
```

--------------------------------

### JS SDK 2 (Legacy): Custom Loader Implementation

Source: https://docs.inappstory.com/sdk-guides/js-sdk/feeds.html

Legacy example for implementing a custom loader using startLoad and endLoad events. This shows how to apply a background image as a loader animation when content starts loading and remove it when loading finishes. Requires an HTML element for the widget.

```html
<div id="stories_widget"></div>

```

```javascript
const storyManager = new window.IAS.StoryManager(storyManagerConfig);
const storiesList = new storyManager.StoriesList("#stories_widget", appearanceManager);

// Show the loader when loading starts
storiesList.on("startLoad", (loaderContainer) => {
  // Display the loader animation
  loaderContainer.style.background = 'url("https://inappstory.com/stories/loader.gif") center / 45px auto no-repeat transparent';
});

// Hide the loader when loading finishes
storiesList.on("endLoad", (loaderContainer, status) => {
  // Remove the loader animation
  loaderContainer.style.background = "none";
  console.log({ status }); // Log the status of the loading event
});

```

--------------------------------

### JS SDK 3: Custom Loader Implementation

Source: https://docs.inappstory.com/sdk-guides/js-sdk/feeds.html

Implement a custom loader for stories using startLoad and endLoad events. This example shows how to hide the feed and display a loader animation when content starts loading, and hide the loader when loading finishes. Requires HTML elements for the widget and loader.

```html
<div id="stories_widget"></div>
<div id="loader"></div>

```

```javascript
import { AppearanceManager, InAppStoryManager } from "@inappstory/js-sdk";

const feed = document.getElementById("stories_widget")
const loader = document.getElementById("loader")

const inAppStoryManager = new InAppStoryManager({ apiKey: "{projectToken}" });
const appearanceManager = new AppearanceManager();
const storiesList = new inAppStoryManager.StoriesList("#stories_widget", appearanceManager);
// Show the loader when loading starts
storiesList.on("startLoad", () => {
  // Hide feed
  feed.style.display = "none";
  // Display the loader animation
  loader.style.display = "block";
});

// Hide the loader when loading finishes
storiesList.on("endLoad", (status) => {
  // Display feed
  feed.style.display = "block";
    // Remove the loader animation
  loader.style.display = "none";
  console.log({ status }); // Log the status of the loading event
});

```

--------------------------------

### Setup StoryView and Delegate

Source: https://docs.inappstory.com/sdk-guides/ios/list-placeholder.html

Configure the StoryView by creating an instance, setting its target, assigning a delegate, and initiating its internal logic.

```swift
class PreloaderController: UIViewController {
...
    // setup StoryView
    fileprivate func setupStoryView()
    {
        // create instance of StoryView
        storyView = StoryView()
        storyView.translatesAutoresizingMaskIntoConstraints = false
        // adding a point from where the reader will be shown
        storyView.target = self
        // set StoryView delegate
        storyView.storiesDelegate = self

        self.view.addSubview(storyView)

        // running internal StoryView logic
        storyView.create()
    }
}

```

--------------------------------

### Install React UgcSdk using yarn

Source: https://docs.inappstory.com/ugc-guides/web-ugc.html

Command to install the React UgcSdk package using yarn. This is an alternative to npm for package installation.

```bash
$ yarn add @inappstory/react-ugc-sdk

```

--------------------------------

### Example Empty Onboarding Response

Source: https://docs.inappstory.com/sdk-guides/js-sdk/onboardings.html

This JSON response indicates that no onboarding stories are available for the current user. The `StoryReader` will not open in this case.

```json
{
  "stories": []
}

```

--------------------------------

### Install React UgcSdk using pnpm

Source: https://docs.inappstory.com/ugc-guides/web-ugc.html

Command to install the React UgcSdk package using pnpm. This is another alternative package manager for installation.

```bash
$ pnpm add @inappstory/react-ugc-sdk

```

--------------------------------

### Initialize SDK and Set Options

Source: https://docs.inappstory.com/sdk-guides/ios/options.html

Initialize the InAppStory SDK with your service key and settings, then set the desired options. Options should be set after initialization and before opening any reader for the first time.

```swift
import UIKit
import InAppStorySDK

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        InAppStory.shared.initWith(serviceKey: <api-key>, settings: Settings(userID: <userID>, tags: <tags array>))
        
        let options = [OptionsKeys.POS : "first_pos",
                       "is_authorize" : "true"]
        InAppStory.shared.options = options
        return true
    }
}
```

--------------------------------

### Initialize and Add StoryView

Source: https://docs.inappstory.com/sdk-guides/ios/story-view.html

Create a StoryView instance, assign it to a controller, and add it to the view hierarchy.

```swift
var storyView: StoryView!

override func viewDidLoad() {
 super.viewDidLoad()

    storyView = StoryView(frame: <CGRect> = .zero, feed: <String> = "", favorite: <Bool> = false)
 storyView.target = <UIViewController>

 view.addSubview(storyView)

 storyView.create()
}
```

--------------------------------

### Create Authentication File

Source: https://docs.inappstory.com/on-premise

Define repository credentials in the .env.auth file within the project root.

```text
IAS_UPDATE_USERNAME=username
IAS_UPDATE_PASSWORD=password
```

--------------------------------

### showOnboardings Method

Source: https://docs.inappstory.com/sdk-guides/ios/onboardings.html

Method to show onboardings in UIKit, supporting custom panel settings for the bottom bar.

```APIDOC
## InAppStory.shared.showOnboardings

### Description
Displays onboarding stories in a UIKit environment with support for custom panel configurations.

### Parameters
#### Request Body
- **from** (UIViewController) - Required - The target controller from where the reader is shown.
- **delegate** (OnboardingDelegate) - Required - The delegate for onboarding events.
- **with** (PanelSettings) - Required - Custom settings for the bottom panel (like, favorites, share).
```

--------------------------------

### Install Polyfills via NPM

Source: https://docs.inappstory.com/sdk-guides/js-sdk/es5-compatible.html

Install the required polyfill packages using npm for use with a module bundler.

```bash
npm install @webcomponents/webcomponentsjs core-js --save
```

--------------------------------

### Initialize InAppStory and Open a Game

Source: https://docs.inappstory.com/sdk-guides/react-sdk/games.html

This example demonstrates initializing the InAppStory SDK with a project token and opening a game. It includes basic error handling for opening the game and sets up the IASContainer for your application.

```javascript
import { StoryManagerConfig, IASContainer, storyManager } from "@inappstory/react-sdk";
import { useEffect } from "react";

export const App = () => {
   const openMyGame = async () => {
        try {
            await storyManager.openGame("{game-id}");
        } catch(error: unknown) {
            console.error(error)
        }
   }

   useEffect(() => {
      openMyGame()
   }, []);

   const storyManagerConfig: StoryManagerConfig = {
       apiKey: "{projectToken}"
   };

   return (
       <IASContainer
           config={storyManagerConfig}
           gameReaderOptions={{ /* yout appearance options */}}
       />
   );
}
```

--------------------------------

### Implement CSP in HTML with Nonce

Source: https://docs.inappstory.com/sdk-guides/react-sdk/implement-content-security-policies.html

Example HTML structure demonstrating how to include the CSP meta tag and apply a nonce to the application bundle script.

```html
<!DOCTYPE html>
<html>
    <head>
        <meta
            http-equiv="Content-Security-Policy"
            content="default-src 'self' data: blob: https://*.inappstory.ru https://*.inappstory.com https://*.getinappstory.com 'sha256-/ayvprJmXbRDI449BxK/5WRZK0CFzow+6O1VdpQ4of0=' 'nonce-{SERVER-GENERATED-NONCE}';" />
        <script defer src="your-app-bundle.js" nonce="{SERVER-GENERATED-NONCE}"></script>
    </head>
    <body>
    </body>
</html>
```

--------------------------------

### UGCStoriesList Reload Example

Source: https://docs.inappstory.com/ugc-guides/web-ugc.html

Example showing how to set a filter and reload the UGC stories list, with an option to disable the loader.

```APIDOC
## UGCStoriesList Reload Example

### Reloading with Filter
```javascript
const storiesList = new storyManager.UGCStoriesList(
  "#stories_widget",
  appearanceManager,
  { filter: { prop1: "a", prop2: "b" } }
);

// Set a new filter
storiesList.setFilter({ prop1: "c", prop2: "d" });

// Reload the list with loader animation
storiesList.reload();

// Reload the list without loader animation
// storiesList.reload({needLoader: false});
```
```

--------------------------------

### Initialize InAppStory SDK and Configure Settings

Source: https://docs.inappstory.com/sdk-guides/ios/appearance.html

Initialize the SDK with your service key and configure user settings including user ID and tags. This should be done early in your application's lifecycle.

```swift
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool
{
    // library initialization
    InAppStory.shared.initWith(serviceKey: <String>)

    // settings can also be specified at any time before creating a StoryView or calling individual stories
    InAppStory.shared.settings = Settings(userID: <String>, tags: <Array<String>>)

    InAppStory.shared.likePanel = <Bool> // enable button bar with likes
    InAppStory.shared.favoritePanel = <Bool> // enable button bar with favorites
    InAppStory.shared.sharePanel = <Bool> // enable button bar with sharing

	 // change like icons
    InAppStory.shared.likeIconView = {
        IASIconView(unselectedImage: UIImage(named: "likeImage")!,
                    selectedImage: UIImage(named: "likeSelectedImage")!)
    }
    // change dislike icons
    InAppStory.shared.dislikeIconView = {
        IASIconView(unselectedImage: UIImage(named: "dislikeImage")!,
                    selectedImage: UIImage(named: "dislikeSelectedImage")!)
    }
    // change favorite icons
    InAppStory.shared.favoriteIconView = {
        IASIconView(unselectedImage: UIImage(named: "favoriteImage")!,
                    selectedImage: UIImage(named: "favoriteSelectedImag")!)
    }
    // change share icons
    InAppStory.shared.shareIconView = {
        IASIconView(unselectedImage: UIImage(named: "shareImage")!,
                    selectedImage: UIImage(named: "shareSelectedImage")!)
    }
    // change sound icons
    InAppStory.shared.soundIconView = {
        IASIconView(unselectedImage: UIImage(named: "soundImage")!,
                    selectedImage: UIImage(named: "soundSelectedImage")!)
    }
    
    // reader close button icon (24pt)
    InAppStory.shared.closeReaderIconView = {
        IASIconView(unselectedImage: UIImage(named: "closeReaderImage")!,
                    selectedImage: nil)
    }
    
    // change refresh button icon
    InAppStory.shared.refreshIconView = {
        IASIconView(unselectedImage: UIImage(named: "refreshImage")!,
                    selectedImage: nil)
    }

    return true
}

```

--------------------------------

### Initialize InAppStory Manager with Placeholders

Source: https://docs.inappstory.com/sdk-guides/js-sdk/placeholders.html

Set up the InAppStory manager with API key, text placeholders, and image placeholders during the initial configuration. This example also imports necessary classes.

```javascript
import { AppearanceManager, InAppStoryManager } from "@inappstory/js-sdk";

const inAppStoryManagerConfig = {
  apiKey: "{project-integration-key}",
  placeholders: {
    "user-name": "Alex",
    "city": "New York",
    "bonus-points": "150"
  },
  imagePlaceholders: {
    "profile-photo": "https://example.com/images/user123.png",
    "promo-banner": "https://example.com/images/sale.png"
  }
};

const inAppStoryManager = new InAppStoryManager(inAppStoryManagerConfig);
const appearanceManager = new AppearanceManager();
```

--------------------------------

### Show Specific Onboarding Feed

Source: https://docs.inappstory.com/sdk-guides/js-sdk/onboardings.html

Use this example to display onboarding stories from a specific feed identified by its slug. This is useful for segmenting onboarding content for different user groups.

```javascript
import { AppearanceManager, InAppStoryManager } from "@inappstory/js-sdk";

const inAppStoryManager = new InAppStoryManager({ apiKey: "{projectToken}" });
inAppStoryManager.showOnboardingStories(appearanceManager, { feed: "new-user" }).then((result) => {
    console.log("Displayed stories:", result.stories);
});

```

--------------------------------

### Navigate to Project Directory

Source: https://docs.inappstory.com/on-premise

Change the current working directory to the project root.

```bash
cd self-hosted
```

--------------------------------

### SDK Initialization

Source: https://docs.inappstory.com/sdk-guides/ios/changelog.html

Configuring the InAppStory SDK with user ID, tags, and placeholders.

```APIDOC
## Initialization

### Description
Initializes the InAppStory SDK with specific settings including user identification and content placeholders.

### Request Example
let IASSettings = Settings(userID: "<User-id>",
                           tags: ["tag_1", "tag_2", "tag_3", "tag_4"],
                           placeholders: ["key_1" : "value_1", "key_2" : "value_2", "key_3" : "value_3"],
                           imagesPlaceholders: ["img_key_1" : "url_value_1", "img_key_2" : "url_value_2", "img_key_3" : "url_value_3"])
InAppStory.shared.initWith(serviceKey: "<Setvice-Key>", settings: IASSettings)
```

--------------------------------

### UGC Story Moderation Notification Example

Source: https://docs.inappstory.com/webhooks

This JSON payload is an example of a notification for UGC story moderation. It includes details about the UGC story, its status, and associated user information.

```json
{
  "ugcStory": {
    "id": 12,
    "status": 6,
    "externalUserId": "ext-10",
    "hasVideo": false,
    "payload": {
      "prop1": "alpha",
      "prop2": "omega"
    }
  },
  "event_id": "8k7SdBMz6KPGhC3S4e4ZpMlm4c1U8p9v",
  "event_name": "ugc-story-moderation",
  "timestamp_ms": 1655728818761
}
```

--------------------------------

### showOnboardings Method

Source: https://docs.inappstory.com/sdk-guides/ios/migrations.html

Displays onboarding stories with support for multi-feed segmentation.

```APIDOC
## showOnboardings

### Description
Displays onboarding stories. The `feed` parameter allows separating onboardings by screens or events.

### Parameters
- **feed** (String) - Optional - The feed identifier.
- **from** (UIViewController) - Required - The view controller to present from.
- **with** ([String]?) - Optional - List of onboarding IDs.
- **delegate** (InAppStoryDelegate) - Required - The delegate for handling events.
- **complete** ((Bool) -> Void) - Required - Completion handler.
```

--------------------------------

### Full InAppStory Flutter Example

Source: https://docs.inappstory.com/sdk-guides/flutter/how-to-get-started.html

A complete example demonstrating the integration of the InAppStory plugin, including SDK initialization and displaying stories using `FeedStoriesWidget` within a Flutter application.

```dart
import 'package:flutter/material.dart';
import 'package:inappstory_plugin/inappstory_plugin.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _inAppStoryPlugin = InAppStoryPlugin();

  final apiKey = '<your-api-key>';

  // can be empty
  final userId = '<user-id>';

  final feed = '<your-feed-id>';

  late final initialization = initSdk();

  Future<void> initSdk() async {
    await _inAppStoryPlugin.initWith(apiKey, userId);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('InAppStory Example'),
        ),
        body: FutureBuilder(
          future: initialization,
          builder: (context, initializationSnapshot) {
            if (initializationSnapshot.connectionState ==
                ConnectionState.done) {
              if (initializationSnapshot.hasError) {
                return const Text('SDK was not initialized');
              } else {
                return Column(
                  children: [
                    FeedStoriesWidget(
                      feed: feed,
                    ),
                  ],
                );
              }
            }
            return const Center(
              child: CircularProgressIndicator(),
            );
          },
        ),
      ),
    );
  }
}
```

--------------------------------

### Initialize SDK (Version 1.18.0+)

Source: https://docs.inappstory.com/sdk-guides/android/how-to-get-started.html

Initialize the SDK in the Application class and build the manager instance.

```kotlin
fun initInAppStorySdk(context: Context) { //Have to call from Application class and pass application context
    InAppStoryManager.initSdk(context)
}

fun createInAppStoryManager(
    apiKey: String,
    userId: String
): InAppStoryManager? {
    return InAppStoryManager.Builder()
        .apiKey(apiKey)
        .userId(userId)
        .create()
}
```

--------------------------------

### Full Checkout Integration Example

Source: https://docs.inappstory.com/sdk-guides/js-sdk/checkout.html

A complete example demonstrating how to integrate InAppStory Checkout. This includes handling cart updates, clicks, and closing the story reader, along with overriding the cart state retrieval.

```javascript
import { InAppStoryManager } from "@inappstory/js-sdk"

const inAppStoryManager = new InAppStoryManager({ apiKey: "{projectToken}" });

let offersById = {};

const handleCartUpdated = ({ offer, onSuccess, onError }) => {
    try {
        if (offersById[offer.offerId]) {
            offersById[offer.offerId].quantity += offer.quantity;
        } else {
            offersById[offer.offerId] = offer;
        }

        onSuccess({
            offers: Object.values(offersById)
        });
    } catch (e) {
        onError({ message: "Failed to update cart" });
    }
};

const handleCartClicked = () => {
    console.log("Cart clicked. Current offers:", Object.values(offersById));
};

const handleCloseStoryReader = () => {
    offersById = {};
};

inAppStoryManager.products.getProductCartState = async () => {
    return {
        offers: Object.values(offersById),
        price: "0",
        priceCurrency: ""
    };
};

inAppStoryManager.on("productCartUpdated", handleCartUpdated);
inAppStoryManager.on("productCartClicked", handleCartClicked);
inAppStoryManager.on("closeStoryReader", handleCloseStoryReader);


```

--------------------------------

### Show Onboardings with Parameters (UIKit)

Source: https://docs.inappstory.com/sdk-guides/ios/onboardings.html

Call the `showOnboardings` method with various parameters including feed, limit, target view controller, tags, delegate, panel settings, and a completion handler. The method returns a `CancellationToken?`.

```swift
InAppStory.shared.showOnboardings(feed: <String> = "", limit: Int = 0, from target: <UIViewController>, with tags: [String]? = nil, delegate: <InAppStoryDelegate>, with panelSettings: PanelSettings? = nil, complete: <()->Void>) -> CancellationToken?

```

--------------------------------

### Getting StackFeed Data

Source: https://docs.inappstory.com/sdk-guides/ios/stack-feed.html

How to retrieve StackFeed data in your controller.

```APIDOC
## Getting StackFeed Data

### Description
In the controller where you intend to display the StackFeed, call `InAppStory.shared.getStackFeed(feed:complete:)` to obtain the necessary data for rendering the 'top story' and the list of stories.

### Method
```swift
InAppStory.shared.getStackFeed(feed: <String>, complete: @escaping StackFeedResult -> Void)
```

### Usage
The retrieved data can be stored before the StackFeed UI view is created, or directly assigned to the view if it already exists.
```

--------------------------------

### Initialize SDK (Pre-1.18.0)

Source: https://docs.inappstory.com/sdk-guides/android/how-to-get-started.html

Legacy initialization method requiring context to be passed directly to the builder.

```kotlin
fun createInAppStoryManager(
    apiKey: String,
    context: Context,
    userId: String
): InAppStoryManager {
    return InAppStoryManager.Builder()
        .apiKey(apiKey)
        .context(context)
        .userId(userId)
        .create()
}
```

--------------------------------

### showOnboardingStories

Source: https://docs.inappstory.com/sdk-guides/react-sdk/external-api.html

Displays onboarding stories based on provided options.

```APIDOC
## showOnboardingStories(options?)

### Description
Displays onboarding stories.

### Parameters
- **options** (object) - Optional - { feed?: string; customTags?: string[]; limit?: number }

### Response
- **Promise** (object) - Resolves with { stories: { id: number; title: string }[] }

### Request Example
storyManager.showOnboardingStories({ feed: "main" })
```

--------------------------------

### w-tooltip-show

Source: https://docs.inappstory.com/glossarium/statistics/stories-widget-events.html

Triggered when a tooltip widget is rendered on slide start.

```APIDOC
## w-tooltip-show

### Description
Widget "tooltip" rendering on slide start.

### Parameters
#### Request Body
- **story_id** (Int) - Required - unique story id
- **feed_id** (Int?) - Optional - unique feed id where stories was opened. Null if it's single.
- **slide_index** (Int) - Required - index of story's slide where callback was called
- **widget_id** (String) - Required - unique widget id
- **widget_label** (String) - Required - button's text
- **widget_tooltip_template** (Number) - Required - Tooltip content template (0 - without template. 1 - ERID template)
```

--------------------------------

### Install InAppStory via Carthage

Source: https://docs.inappstory.com/sdk-guides/ios/how-to-get-started.html

Specify the InAppStory dependency in your Cartfile.

```text
github "inappstory/ios-ias-sdk" ~> 1.28.1 
```

```text
github "inappstory/ios-ias-sdk" ~> 1.28.1 -SwiftUI
```

--------------------------------

### Get sound status

Source: https://docs.inappstory.com/sdk-guides/react-native/sound.html

Retrieves the current sound status asynchronously.

```javascript
const soundEnabled = await storyManager.getSound();
```

--------------------------------

### Handle Game Actions and Opening in UIKit

Source: https://docs.inappstory.com/sdk-guides/ios/link-handling.html

Configures global action listeners for games and demonstrates how to trigger a game launch from a button press.

```swift
override func viewDidLoad() {
    super.viewDidLoad()

    /// The closure is triggered when the SDK tries to call a link from the game
    InAppStory.shared.onActionWith = { target, type, storyType in
        /// simple opening of a link in an external browser
        if let url = URL(string: target) {
            UIApplication.shared.open(url)
        }
    }
}
...

/// method is executed when the button is pressed
@IBAction func openGame(_ sender: UIButton) {
    /// game opening at the touch of a button
    InAppStory.shared.openGame(with: Game(id:"game_id")) { opened in
        /// the closure is triggered by opening the game
        /// if an error occurs while opening the game
        /// the opened parameter will be false
    }
}
```

--------------------------------

### Install React SDK 0.3.0

Source: https://docs.inappstory.com/sdk-guides/react-sdk/migrations.html

Update the dependency to version 0.3.0 or higher.

```bash
npm install "@inappstory/react-sdk@^0.3.0"
```

--------------------------------

### Initialize SDK with API Key and User ID

Source: https://docs.inappstory.com/sdk-guides/flutter/how-to-get-started.html

Await the plugin's return before using other APIs. Initialize the SDK with your API key, user ID, and optional locale and cache size.

```dart
Future<void> initSDK() async {
  await InAppStoryPlugin().initWith('<your api key>', '<user id>', locale: <locale>, cacheSize: CacheSize.medium);

  // ... any other calls to API
}
```

--------------------------------

### Integrate InAppStory Widget via CDN

Source: https://docs.inappstory.com/sdk-guides/js-sdk/how-to-get-started.html

Full HTML example for loading the SDK from the CDN and initializing the widget with event listeners.

```html
<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
</head>

<html>
  <body>
    <div id="stories_widget"></div>
    <script
      defer
      src="https://cdn.inappstory.com/sdk/v3.10.3/dist/js/IAS.js"
    ></script>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const inAppStoryManagerConfig = {
          apiKey: "{project-integration-key}",
        };

        const inAppStoryManager = new window.IAS.InAppStoryManager(inAppStoryManagerConfig);
        const appearanceManager = new window.IAS.AppearanceManager();
        const storiesList = new inAppStoryManager.StoriesList(
          "#stories_widget",
          appearanceManager,
          { feed: "default" }
        );

        const events = [
          "clickOnStory",
          "showSlide",
          "showStory",
          "closeStory",
          "clickOnButton",
          "likeStory",
          "dislikeStory",
          "favoriteStory",
          "shareStory",
          "shareStoryWithPath",
          "feedLoad",
          "feedImpression",
        ];
        events.forEach((eventName) =>
          inAppStoryManager.on(eventName, (payload) =>
            console.log("event", eventName, payload)
          )
        );
      });
    </script>
  </body>
</html>
```

--------------------------------

### Initialize and Add StoryView

Source: https://docs.inappstory.com/sdk-guides/ios/widget-goods.html

Initialize a StoryView and add it to your view hierarchy. Ensure this is done after the SDK has been initialized.

```swift
override func viewDidLoad() {
    super.viewDidLoad()

    let storyView = StoryView(frame: CGRect(x: 0.0, y: 100.0, width: 320.0, height: 160.0)) //StoryView initialization
    view.addSubview(storyView) //adding an object to a view

    storyView.create() //running internal logic
}
```

--------------------------------

### Implement GoodsWidgetAppearanceAdapter

Source: https://docs.inappstory.com/sdk-guides/android/widget-goods.html

Example of overriding the adapter to customize specific appearance properties.

```kotlin
fun getGoodsWidgetAppearance(): IGoodsWidgetAppearance {
    return object : GoodsWidgetAppearanceAdapter() {
        override fun getBackgroundColor(): Int {
            return Color.BLUE
        }
    }
}
```

--------------------------------

### Initialize and Configure InAppStory SDK

Source: https://docs.inappstory.com/sdk-guides/ios/appearance.html

Initialize the SDK with a service key and set user-specific settings. Customizations like close button position can be applied before creating StoryViews.

```swift
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool
{
    // library initialization
    InAppStory.shared.initWith(serviceKey: <String>)

    // settings can also be specified at any time before creating a StoryView or calling individual stories
    InAppStory.shared.settings = Settings(userID: <String>, tags: <Array<String>>)

    // close button position
    InAppStory.shared.closeButtonPosition = <ClosePosition>

    return true
}

```

--------------------------------

### Game Event: StartGame

Source: https://docs.inappstory.com/sdk-guides/ios/migrations.html

Triggered when a game starts. The `index` can be obtained from `GameStoryData.SlideData`.

```swift
.startGame(gameData: GameStoryData)
```

--------------------------------

### Initialize Android SDK

Source: https://docs.inappstory.com/sdk-guides/react-native/how-to-get-started.html

Import the SDK and initialize it within the MainApplication class.

```java
import com.inappstorysdk.InAppStory;
```

```java
InAppStory.initSDK(getApplicationContext());
```
Tokens:
Raw