Skip to main content

JavaScript Bridge

There are several Javascript methods in the WebView of Mixin Messenger, which can be used by the bot's webpage. It's convenient for the developers to read conversation information and change locale settings.


This returns the context of current webpage.

getMixinContext: function () {  let ctx = {};  if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.MixinContext) {    ctx = JSON.parse(prompt('MixinContext.getContext()'))    ctx.platform = ctx.platform || 'iOS'  } else if (window.MixinContext && (typeof window.MixinContext.getContext === 'function')) {    ctx = JSON.parse(window.MixinContext.getContext())    ctx.platform = ctx.platform || 'Android'  }  return ctx},

The response:

{  "app_version": "0.24.0",      // Mixin Messenger version  "immersive": true,            // immersive mode on/off  "appearance": "dark",         // light or dark theme, according to system settings  "currency": "USD",            // currency  "locale": "en-US",            // language  "platform": "iOS",            // Android | iOS | Desktop  "conversation_id": ""         // the conversation ID. it would be empty if the webpage is not open in a conversation}


Read the theme-color from the html and apply:

reloadTheme: function () {  switch (this.getMixinContext().platform) {    case 'iOS':      window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.reloadTheme && window.webkit.messageHandlers.reloadTheme.postMessage('');      return    case 'Android':    case 'Desktop':      window.MixinContext && (typeof window.MixinContext.reloadTheme === 'function') && window.MixinContext.reloadTheme()      return  }}

Please read Design Guide for more details about theme.


Invoke the playlist. audios is a string array which contains the URI list of mp3 files.

playlist: function (audios) {  switch (this.getMixinContext().platform) {    case 'iOS':      window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.playlist && window.webkit.messageHandlers.playlist.postMessage(audios);      return    case 'Android':    case 'Desktop':      window.MixinContext && (typeof window.MixinContext.playlist === 'function') && window.MixinContext.playlist(audios)      return  }}

This method is supported in Mixin Messenger 0.30.0 or above.


Close the window:

close: function () {  switch (this.getMixinContext().platform) {    case 'iOS':      window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.close && window.webkit.messageHandlers.close.postMessage('');      return    case 'Android':    case 'Desktop':      window.MixinContext && (typeof window.MixinContext.close === 'function') && window.MixinContext.close()      return  }}

This method is supported in Mixin Messenger 0.33.0 or above.

Third-Party SDK#

For ease of use, a third-party team packaged these Javascript methods into JsBridge SDK. The SDK provides a unified access method, and gives a list of all Javascript methods and usage examples. please vist here for more details.