Web & Mini Program reference

Web & Mini Program API overview

Use the JavaScript SDK to add chat, relationships, groups, message history, push coordination, and voice & video signalling to browser, H5, uni-app, and WeChat Mini Program clients.

Architecture and entry point

A single flooim instance owns the connection and exposes focused managers. Keep that instance for the lifetime of the application, register event handlers before sign-in, and let the managers own cached state and remote operations.

Reference map

Choose the narrowest reference for your task. Each item links to the locally hosted generated API page.

flooimInitialisation, sign-in, sign-out, connection state, and global event registration.userManageCurrent-user identity, tokens, profile data, registration, and recent conversations.rosterManageContacts, applications, block lists, one-to-one history, and read state.groupManageGroup lifecycle, membership, moderation, announcements, shared files, and group history.sysManageOne-to-one, group, mention, and attachment message delivery.rtcManageVoice & video call signalling and real-time session events.

Recommended integration flow

Create one SDK instance with the App ID and the build-specific transport configuration.
Subscribe to connection, sign-in, conversation, and message events before authenticating.
Sign in with a user token issued by your backend; never expose the Server API access token.
Open the appropriate roster or group context, then send and receive messages through the managers.
Remove listeners and release media resources when the application or page is torn down.

What to keep in mind

The web, uni-app, and native WeChat Mini Program builds share the same conceptual API but differ in packaging and transport configuration.
Event callbacks are the source of truth for asynchronous connection and message state.
API identifiers retain legacy names for compatibility; editorial guidance uses chat and voice & video.

Continue reading

Detailed Web SDK guide →Web quick start →Shared JavaScript types →

Web & Mini Program

Set up the Web SDK

Choose the build for your runtime, create one long-lived client, and register events before sign-in.

Choose the right build

WebFor desktop browsers and conventional front-end applications.uni-appFor H5, multi-vendor Mini Programs, and apps built with DCloud uni-app.WeChat Mini ProgramThe native WeChat build, with the same functional surface as the uni-app edition.

Prepare the project

Download floo-3.0.0.js for a direct browser integration, or add the corresponding SDK build to your package workflow.
For voice & video, add webrtc-adapter and jquery to package.json and install them with your package manager.
Create the App ID in the console first. Keep one SDK instance for the application lifetime instead of recreating it per view.

Create the SDK instance

Set ws to false for the Web build and true for uni-app. The same configuration object is used by both supported loading styles.

    const config = {
      // dnsServer: "https://dns.lanyingim.com/v2/app_dns",
      appid: "YOUR_APP_ID",
      ws: false, // The uniapp version needs to be set to true, the web version needs to be set to false
      autoLogin: true
      };

Script-compatible loading

The global constructor supports script-tag integrations. Initialise it after the bundle is ready, and guard against concurrent script loading with retry logic.

    import "floo-3.0.0.js";
    
    const im = new window.flooIM(config);

Module loading

In a bundled application, import flooim and create the same long-lived client instance.

    import flooim from 'floo-3.0.0';
    
    const im = flooim(config);

Sign in and register events

Register connection and message handlers before sign-in so the application does not miss initial state. Use off with the same handler when the owning view or application is torn down.

        im.login({
          mobile:String, # Choose either mobile or name
          name:String,
          password:String,
        })

        im.on('events', (ret) => {
          //do something with ret
        })
        // or
        im.on({
          eventName: (ret) => {
            //do something with ret
          },
          ...
        })

        im.off('events', (ret) => {
          //do something with ret
        })
        // or
        im.off({
          eventName: (ret) => {
            //do something with ret
          },
        ...
        })

Use the feature managers

Use userManage for the current account, rosterManage for contacts and one-to-one history, groupManage for groups, sysManage for message delivery, and rtcManage for voice & video signalling.

Integration notes

Web, uni-app, and native WeChat builds are conceptually aligned, but packaging and transport settings differ.
Callbacks and emitted events—not the immediate return from an asynchronous call—are the source of truth for UI state.
Some operations use cached data while their async counterparts refresh from the server; choose deliberately.
Keep API identifiers exactly as documented, including legacy floo and rtc names.