### Install Userlike Messenger via npm

Source: https://github.com/userlike/messenger/blob/master/README.md

Installs the Userlike Messenger package using npm. This is the primary method for integrating the messenger into your project.

```bash
npm install @userlike/messenger
```

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

### Access API Methods via Mount Subscription

Source: https://github.com/userlike/messenger/blob/master/MIGRATION.md

API methods like `setVisibility` are now accessible only after mounting and as part of the subscription callback, ensuring the messenger is ready before interaction.

```typescript
async myFunction() {
  subscription = api.mount().subscribe(async (result) => {
    if (result.kind === "error") {
      console.error(result.error);
      return;
    }

    if (result.value === null) {
      console.log("messenger is not mounted", result.reason);
      return;
    }

    const messenger = result.value;

    await messenger.setVisibility({
      main: true,
      button: false,
      notifications: false,
    });
  });
}
```

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

### Handle Messenger Mounting and Unmounting with Subscriptions

Source: https://github.com/userlike/messenger/blob/master/MIGRATION.md

The mounting and unmounting process now involves subscriptions. The `mount()` method returns an `Unsubscribable` object, and API methods are accessed through the subscribed result.

```typescript
import { Unsubscribable } from '@userlike/messenger';

let subscription: Unsubscribable;
let messenger: v2.Messenger;

mountButton.onclick = () => {
  subscription = api.mount().subscribe(result => {
    if (result.kind === "error") {
      console.error(result.error);
      return;
    }

    if (result.value === null) {
      console.log("messenger is not mounted", result.reason);
      return;
    }

    messenger = result.value;
  });
};

unmountButton.onclick = () => subscription.unsubscribe();
```

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

### Specify Version 2 in Messenger Creation

Source: https://github.com/userlike/messenger/blob/master/MIGRATION.md

When creating a new messenger instance, set the `version` option to `2` to ensure you are using the latest version of the Userlike Messenger.

```diff
const result = await createMessenger({
  version: 2,
  widgetKey: "YOUR_WIDGET_SECRET",
});
```

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

### Configure CSP with Nonce

Source: https://github.com/userlike/messenger/blob/master/README.md

This example shows how to provide a nonce to the Messenger API for Content Security Policy (CSP) configuration. This helps in allowing the necessary resources for the Userlike Messenger API to function correctly within your application.

```typescript
api.mount({
  nonce: "your-nonce",
});
```

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

### Import v2 Types in TypeScript

Source: https://github.com/userlike/messenger/blob/master/MIGRATION.md

Update TypeScript import statements to use `v2` instead of `v1` from the `@userlike/messenger` package for type safety and compatibility.

```typescript
import { createMessenger, v2 } from "@userlike/messenger";
```

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

### Control Userlike Messenger Visibility

Source: https://github.com/userlike/messenger/blob/master/README.md

Provides examples of how to control the visibility of the Userlike messenger's main interface, button, and notifications. You can hide or show specific elements as needed.

```typescript
// Hide button and notifications
async (messenger: v2.Messenger) => {
  await messenger.setVisibility({
    main: true,
    button: false,
    notifications: false,
  });
};

// Show everything
async (messenger: v2.Messenger) => {
  await messenger.setVisibility({
    main: true,
    button: true,
    notifications: true,
  });
};
```

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

### Handle Messenger API Errors

Source: https://github.com/userlike/messenger/blob/master/README.md

This example shows how to handle potential errors returned by the Messenger API. It checks the 'kind' property of the result object and logs or throws an error if the operation failed.

```typescript
const result = await api.someAction();

if (result.kind === "error") {
  // Handle the error (e.g., log, show message, or throw)
  console.error("Messenger API error:", result.error);
  throw new Error(result.error);
}

// Success case
const value = result.value;
```

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

### Initialize Userlike Messenger with AMD

Source: https://github.com/userlike/messenger/blob/master/README.md

Initializes the Userlike Messenger using an AMD loader like RequireJS, providing a way to manage dependencies in older JavaScript environments.

```javascript
require(['userlike-messenger'], function (userlike) {
  userlike.createMessenger({ ... });
});
```

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

### Create Userlike Messenger API Instance (TypeScript)

Source: https://github.com/userlike/messenger/blob/master/README.md

Demonstrates how to create an instance of the Userlike Messenger API using TypeScript. It handles potential errors during creation and checks if the API is available.

```typescript
import { createMessenger, v1 } from "@userlike/messenger";

async function createApi(): Promise<v2.Api> {
  const result = await createMessenger({
    version: 2,
    widgetKey: "YOUR_WIDGET_SECRET",
  });

  if (result.kind === "error") throw new Error(result.error);

  const { api } = result.value;

  if (api === null) {
    throw new Error(
      "api reached end-of-life, please check documentation and upgrade.",
    );
  }

  return api;
}
```

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

### Mount and Unmount Userlike Messenger

Source: https://github.com/userlike/messenger/blob/master/README.md

Shows how to mount the Userlike messenger and subscribe to its mounting status. Unsubscribing from the returned subscription effectively destroys the messenger.

```typescript
(api: v2.Api) => {
  const subscription = api.mount().subscribe((result) => {
    if (result.kind === "error") {
      console.error(result.error);
      return;
    }

    if (result.value === null) {
      console.log("messenger is not mounted", result.reason);
      return;
    }

    const messenger = result.value;
  });

  // Unsubscribing would destroy the messenger
  subscription.unsubscribe();
};
```

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

### Implement Contact Authentication with JWT

Source: https://github.com/userlike/messenger/blob/master/README.md

This code illustrates how to set up contact authentication by providing a JWT to the `mount` function. It includes a `getToken` function to generate the JWT and an `onError` callback for handling authentication failures.

```typescript
api.mount({
  externalToken: {
    getToken: () => {
      // return a JWT created by your service
    },
    onError: (e) => {
      // callback to handle errors related to contact authentication
    },
  },
});
```

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

### Listen to Userlike Messenger State Changes

Source: https://github.com/userlike/messenger/blob/master/README.md

Shows how to subscribe to the messenger's state observable to receive updates on its current status. Remember to unsubscribe when no longer needed.

```typescript
(messenger: v2.Messenger) => {
  const subscription = messenger.state$.subscribe({
    next: (state) => console.log("next", state),
    complete: () => console.log("complete"),
  });

  // unsubscribe when you don't need to listen to changes anymore
  subscription.unsubscribe();
};
```

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

### Maximize and Minimize Userlike Messenger

Source: https://github.com/userlike/messenger/blob/master/README.md

Shows how to programmatically maximize and minimize the Userlike messenger interface.

```typescript
async (messenger: v2.Messenger) => {
  await messenger.maximize();
  await messenger.minimize();
};
```

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

### Include Userlike Messenger via Script Tag

Source: https://github.com/userlike/messenger/blob/master/README.md

Includes the Userlike Messenger API directly in an HTML file using a script tag from unpkg. This method is suitable for quick integration without bundling but is not recommended for production.

```html
<!--
unpkg is an open source project. It's not affiliated with Userlike. Use it to quickly and easily load
messenger API without bundling it yourself. We highly advise against using unpkg for production.
-->
<script src="https://unpkg.com/@userlike/messenger/dist/browser/index.min.js"></script>
<script>
  UserlikeMessenger.createMessenger({ ... });
</script>
```

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

### Import createMessenger for CommonJS

Source: https://github.com/userlike/messenger/blob/master/README.md

Imports the `createMessenger` function using CommonJS syntax for Node.js environments.

```javascript
const { createMessenger } = require("@userlike/messenger");
```

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

### Import createMessenger for ES Modules

Source: https://github.com/userlike/messenger/blob/master/README.md

Imports the `createMessenger` function from the Userlike Messenger package for use in ES module environments.

```javascript
import { createMessenger } from "@userlike/messenger";
```

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

### Set User Contact Information

Source: https://github.com/userlike/messenger/blob/master/README.md

Demonstrates how to set the contact information (name and email) for the user within the Userlike messenger.

```typescript
async (messenger: v2.Messenger) => {
  await messenger.setContactInfo({
    name: "Foo Bar",
    email: "foobar@example.com",
  });
};
```

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

### Set Custom Data in Userlike Messenger

Source: https://github.com/userlike/messenger/blob/master/README.md

Explains how to set custom key-value data associated with the user's session in the Userlike messenger.

```typescript
async (messenger: v2.Messenger) => {
  await messenger.setCustomData({
    test: "test data",
  });
};
```

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

### Log Out User from Userlike Messenger

Source: https://github.com/userlike/messenger/blob/master/README.md

Demonstrates how to log out the current user from the Userlike messenger, clearing their session.

```typescript
async (messenger: v2.Messenger) => {
  await messenger.logout();
};
```

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

### Handle Unread Message Count with RxJS

Source: https://github.com/userlike/messenger/blob/master/README.md

This snippet demonstrates how to use RxJS to subscribe to messenger state changes and calculate the unread message count. It filters for successful API responses and maps the state to extract the unread count.

```typescript
import * as Rx from "rxjs";
import * as $ from "rxjs/operators";
import { v1 } from "@userlike/messenger";

(api: v2.Api) => {
  const unreadMessageCount$ = Rx.pipe(
    api.mount(),
    $.filter((result) => result.kind === "success"),
    $.map((result) => result.value),
    $.switchMap((messenger) => messenger.state$),
    $.map(v2.getUnreadMessageCount),
  );
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.