A familiar way to connect.
The official weBump control uses the app icon, blue rounded surface and two clear states. Use it in a website, a Godot HTML shell, or a SwiftUI app.
Ready to connect
Connection confirmed
These previews do not sign you in.
HTML / Godot web shell
Self-host the files from the kit alongside your game. Put the control outside the canvas so it supports keyboard navigation, screen readers and mobile browsers.
<link rel="stylesheet" href="/connect-button/webump-connect.css"> <button class="webump-connect" type="button" id="connect-webump"> <img src="/connect-button/webump-icon.png" alt="" width="44" height="44"> <span>Connect to weBump</span> </button>
Attach your click handler to begin OAuth through your own backend. Preserve the game’s local save before navigation. The kit has no tracking, network requests, token storage or automatic OAuth behavior.
Connected, loading and disconnected states
After your backend confirms a valid player session, set
data-connected="true" and change the text to “Connected
to weBump”. Clicking can open connection settings; otherwise use a
disabled status button. While connecting, disable the button, set
aria-busy="true" and show “Connecting to weBump…”. On
cancel or failure, restore the connect state and show a readable error
nearby. Never infer connection from a local flag or a popup message
alone.
SwiftUI
import WeBumpKit
WeBumpConnectButton(
isConnected: connected,
isConnecting: connecting
) {
// Start your connection flow, or open connection settings.
}
The package includes the app icon. The control supports Dynamic Type and does not manage credentials; use WeBumpClient for native OAuth and Keychain storage. Its action remains yours to implement.
Other engines and frameworks
Connect SVG · Connected SVG · App icon PNG
Use the SVG as artwork inside a real accessible button, or build the same layout with your framework’s native controls. Retain the wording, app icon, colors and rounded shape. Default height is 64 px; never shrink the touch target below 44 px. Leave 12 px clear space, provide visible keyboard focus, allow text to grow, and respect reduced motion. Do not use this button to imply weBump endorsement or hide the permissions you request.
Do not add checkmarks, status dots, or extra icons inside the control. The connected state uses the lighter surface and the exact text “Connected to weBump”. Keep errors or other status messages outside the button.