This document describes how to quickly integrate the Tencent Cloud IM SDK into your web or Mini Program project.

• You can integrate the IM SDK into your web project by using npm (recommended) or script.
• You can integrate the IM SDK into your Mini Program project by using npm.
• You can integrate the SDK upload plugin for faster and safer upload of rich text message resources. For more information, see SDK Upload Plugin Integration (Web & Mini Program).

Preparations

• You have already created an IM app and obtained the SDKAppID.
• You have obtained the key information.

Relevant Documents

• Demo Quick Start
• Running the IM SDK (Mini Program) Demo
• Running the IM SDK (Web) Demo
• SDK Upload Plugin Integration (Web & Mini Program)

Integrating the SDK

Integrating via npm (recommended)

Use npm to install appropriate IM SDK dependencies in your project.

Web project

// IM Web SDK
npm install tim-js-sdk --save
// The Tencent Cloud IM upload plugin is required to send messages such as image and files.
npm install tim-upload-plugin --save

Note：

If a problem occurs during dependency synchronization, change the npm source and try again.

// Change cnpm source
npm config set registry http://r.cnpmjs.org/

Import the module into the project script:

import TIM from 'tim-js-sdk';
import TIMUploadPlugin from 'tim-upload-plugin';

let options = {
  SDKAppID: 0 // Replace `0` with the `SDKAppID` of your IM app during access.
};
// Create an SDK instance. The `TIM.create()` method returns the same instance for the same `SDKAppID`.
let tim = TIM.create(options); // The SDK instance is usually represented by `tim`.

// Set the SDK log output level. For more information on each level, see <a href="https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html#setLogLevel">setLogLevel API Description</a>.
tim.setLogLevel(0); // Common level. You are advised to use this level during access as it covers more logs.
// tim.setLogLevel(1); // Release level, at which the SDK outputs important information. You are advised to use this log level in a production environment.

// Register the Tencent Cloud IM upload plugin.
tim.registerPlugin({'tim-upload-plugin': TIMUploadPlugin});

Mini Program project

// IM Mini Program SDK
npm install tim-wx-sdk --save
// The Tencent Cloud IM upload plugin is required to send messages such as image and files.
npm install tim-upload-plugin --save

Note：

If a problem occurs during dependency synchronization, change the npm source and try again.

// Change cnpm source
npm config set registry http://r.cnpmjs.org/

Import modules to the project script and initialize it.

import TIM from 'tim-wx-sdk';
import TIMUploadPlugin from 'tim-upload-plugin';

let options = {
  SDKAppID: 0 // Replace `0` with the `SDKAppID` of your IM app during access.
};
// Create an SDK instance. The `TIM.create()` method returns the same instance for the same `SDKAppID`.
let tim = TIM.create(options); // The SDK instance is usually represented by `tim`.

// Set the SDK log output level. For more information on each level, see <a href="https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html#setLogLevel">setLogLevel API Description</a>.
tim.setLogLevel(0); // Common level. You are advised to use this level during access as it covers more logs.
// tim.setLogLevel(1); // Release level, at which the SDK outputs important information. You are advised to use this log level in a production environment.

// Register the Tencent Cloud IM upload plugin.
tim.registerPlugin({'tim-upload-plugin': TIMUploadPlugin});

For more information on how to initialize the SDK and use APIs, see SDK Initialization.

Integrating via script

Import the SDK to your project by using the script tag and initialize the SDK.

<!-- `tim-js.js` and `tim-upload-plugin.js` can be obtained at https://github.com/tencentyun/TIMSDK/tree/master/H5/sdk. -->
<script src="./tim-js.js"></script>
<script src="./tim-upload-plugin.js"></script>
<script>
var options = {
  SDKAppID: 0 // Replace `0` with the `SDKAppID` of your IM app during access.
};
// Create an SDK instance. The `TIM.create()` method returns the same instance for the same `SDKAppID`.
var tim = TIM.create(options);
// Set the SDK log output level. For details on each level, see **setLogLevel API description**.
tim.setLogLevel(0); // Common level. You are advised to use this level during access as it covers more logs.
// tim.setLogLevel(1); // Release level, at which the SDK outputs important information. You are advised to use this log level in a production environment.

// Register the Tencent Cloud IM upload plugin.
tim.registerPlugin({'tim-upload-plugin': TIMUploadPlugin});

// Next, you can use `tim` to bind events and build IM apps.
</script>

Note：

Set the SDK log output level. For more information on each level, see setLogLevel API Description.

For more information on how to initialize the SDK and use APIs, see SDK Initialization.

Relevant resources

• SDK Update Log
• SDK API Documentation
• FAQs
• IM Web Demo
• Download URL of Tencent Cloud IM Upload Plugin

FAQs

1. What should I do if I want to launch a Mini Program and deploy a production environment?
Configure domain names by navigating to WeChat Official Accounts Platform > Development > Development Settings > Server Domain Name:

Add the following domain names to request valid domain names:

Add the following domain name to the uploadFile valid domain name:

Add the following domain name to downloadFile valid domain name: