Scatter Docs — Integrate ScatterJS & Bridge

Docs overview

What you get here

Use these docs to install ScatterJS, wire plugins for your chains, define networks with Chain IDs, and follow the signing flow that keeps users safe. When in doubt, see the Security guide or FAQ for edge cases.

Web quickstart

Install ScatterJS and plugins

Choose npm for bundled apps or script tags for HTML builds — always include the core package plus the plugins you actually need.

npm install

npm i -S scatterjs-core
npm i -S scatterjs-plugin-eosjs   # eosjs <=16.0.9
npm i -S scatterjs-plugin-eosjs2  # eosjs 20+
npm i -S scatterjs-plugin-web3    # Ethereum
npm i -S scatterjs-plugin-tron    # Tron
npm i -D @babel/runtime           # fix babel/webpack hiccups

HTML / JS include

<script src="https://cdn.scattercdn.com/file/scatter-cdn/js/latest/scatterjs-core.min.js"></script>
<script src="https://cdn.scattercdn.com/file/scatter-cdn/js/latest/scatterjs-plugin-eosjs.min.js"></script>
<script src="https://cdn.scattercdn.com/file/scatter-cdn/js/latest/scatterjs-plugin-eosjs2.min.js"></script>
<script src="https://cdn.scattercdn.com/file/scatter-cdn/js/latest/scatterjs-plugin-web3.min.js"></script>
<script src="https://cdn.scattercdn.com/file/scatter-cdn/js/latest/scatterjs-plugin-tron.min.js"></script>

Package names

In Node you can alias imports; in HTML they stay as-is. eosjs and eosjs2 share an import name — don’t load both.

PackageImport

scatterjs-plugin-eosjsScatterEOS

scatterjs-plugin-eosjs2ScatterEOS

scatterjs-plugin-web3ScatterETH

scatterjs-plugin-tronScatterTron

Core usage

Wire ScatterJS in your app

Import core + plugins, connect once, and store the Scatter reference in your state layer to avoid repeated handshakes.

import ScatterJS from 'scatterjs-core';
import ScatterEOS from 'scatterjs-plugin-eosjs';

ScatterJS.plugins(new ScatterEOS());

ScatterJS.scatter.connect('Your_App').then((connected) => {
  if (!connected) return false;

  const scatter = ScatterJS.scatter;
  window.ScatterJS = null;
});

Redux/Vuex/Services: dispatch or inject the single Scatter reference once connected.

Topology

Define networks with Chain IDs

Networks keep mainnet and testnet accounts separate. Chain ID is the key that binds accounts to a network.

const network = {
  blockchain: 'eos',
  host: 'localhost',
  port: 8888,
  protocol: 'http',
  chainId: ''
};

Host

IP or domain only — no protocol or port inline.

host: '127.0.0.1'
host: 'localhost'
host: 'nodes.get-scatter.com'

Port

Numeric ports. Common: 80 (HTTP), 443 (HTTPS).

port: 80
port: 443

Protocol

Match the node config.

protocol: 'http'
protocol: 'https'

Chain ID matters

Accounts are grouped by Chain ID first. Omitting it can break lookups even if host/port/protocol match.

chainId: '1'
chainId: 'acab4m20dlsdl3DlsSo3'

Chain support

Supported blockchains

Use these identifiers when fetching accounts or building signature providers.

BlockchainIdentifier

EOSIOeos

Ethereumeth

Trontrx

const Blockchains = {
  EOSIO: 'eos',
  Ethereum: 'eth',
  Tron: 'trx',
};

const blockchain = Blockchains.EOSIO;

Interaction flow

Connect → Identity → Sign

Scatter enforces a predictable journey to protect users. Connect once, request identity with networks, then sign with returned accounts.

import ScatterJS from 'scatterjs-core';
import ScatterEOS from 'scatterjs-plugin-eosjs';
import Eos from 'eosjs';

ScatterJS.plugins(new ScatterEOS());

const network = {
  blockchain: 'eos',
  protocol: 'https',
  host: 'nodes.get-scatter.com',
  port: 443,
  chainId: 'aca376f206b8fc25a6ed44dbdc66547c36c6c33e3a119ffbeaef943642f0e906',
};

ScatterJS.scatter.connect('My-App').then((connected) => {
  if (!connected) return false;
  const scatter = ScatterJS.scatter;
  const requiredFields = { accounts: [network] };

  scatter.getIdentity(requiredFields).then(() => {
    const account = scatter.identity.accounts.find((x) => x.blockchain === 'eos');
    const eos = scatter.eos(network, Eos, { expireInSeconds: 60 });
    const opts = { authorization: [`${account.name}@${account.authority}`] };

    eos.transfer(account.name, 'helloworld', '1.0000 EOS', 'memo', opts)
      .then((trx) => console.log(`Transaction ID: ${trx.transaction_id}`))
      .catch((error) => console.error(error));
  }).catch((error) => console.error(error));
});

Safe UX

Design for clarity

Permission scope

Request only the networks and accounts you need. Re-prompt after sensitive flows.

Surface hashes

Show operation summaries and hashes before signatures so users can verify intent.

Handle declines

Expect users to cancel. Offer retry and back-out paths without breaking sessions.

Need more?

Check the Security guide and FAQ for advanced cases.