Arkbuddy Widgets

Interactive Widget Builder

Use the visual builder to customize your widget, preview it live, and copy the embed code - no coding required!

Widget Builder

Configuration

Advanced Customization

Live Preview

Embed Code

Real-time Data

Live player counts and server status

Fully Customizable

Match your website's design perfectly

Responsive

Works great on all devices

Easy Integration

Simple copy-paste implementation

Quick Start

Get started in 3 simple steps:

Widget Builder

Configuration

Advanced Customization

Live Preview

Embed Code

1

Choose Widget Type

Select from single server, multi-server, or cluster widgets below

2

Customize

Configure colors, layout, and display options

3

Copy & Paste

Add the code snippet to your website

Single Server Widget

Display information for a single ARK server

Widget Builder

Configuration

Advanced Customization

Live Preview

Embed Code

Live Demo

Implementation

<!-- Single Server Widget -->
<div class="arkbuddy-widget"
     data-server="YOUR_SERVER_IP:PORT"
     data-platform="ASA"
     data-type="unofficial"
     data-theme="dark">
</div>

<!-- Load the widget script -->
<script src="https://api.arkbuddy.app/arkbuddy-widget.js"></script>

Features:

  • Server name and status
  • Current/max players with progress bar
  • Map name and game mode (PvE/PvP)
  • Auto-refresh capability
  • Dark/light theme support

Multi-Server Widget

Display multiple servers in a grid or list layout

Live Demo

Implementation

<!-- Multi-Server Widget -->
<div class="arkbuddy-multi-widget"
     data-servers='[
       {"ip":"SERVER1_IP:PORT","platform":"ASA","type":"unofficial"},
       {"ip":"SERVER2_IP:PORT","platform":"ASA","type":"unofficial"},
       {"ip":"SERVER3_IP:PORT","platform":"ASA","type":"unofficial"}
     ]'
     data-theme="dark"
     data-layout="grid">
</div>

<!-- Load the widget script -->
<script src="https://api.arkbuddy.app/arkbuddy-widget.js"></script>

Features:

  • Display multiple servers at once
  • Grid or list layout options
  • Automatic sorting by player count
  • Responsive design for all screen sizes
  • Batch server data fetching

Cluster Widget

Display all servers in a cluster using a single cluster ID

Live Demo

Implementation

<!-- Cluster Widget -->
<div class="arkbuddy-cluster-widget"
     data-cluster-id="YOUR_CLUSTER_ID"
     data-theme="dark"
     data-layout="grid">
</div>

<!-- Load the widget script -->
<script src="https://api.arkbuddy.app/arkbuddy-widget.js"></script>

Features:

  • Automatic server discovery via cluster ID
  • Cluster name and server count header
  • All servers displayed automatically
  • Perfect for ARK cluster networks
  • Grid or list layout options

Finding Your Cluster ID

You can find your cluster ID by:

Customization Options

All widgets support extensive customization via data attributes:

Colors

  • data-bg-color - Background color
  • data-text-color - Text color
  • data-accent-color - Accent color
  • data-border-color - Border color

Layout

  • data-border-radius - Corner roundness
  • data-border-width - Border thickness
  • data-font-size - Base font size
  • data-layout - Grid or list (multi/cluster)

Display

  • data-show-map - Show map name
  • data-show-players - Show player count
  • data-show-status - Show status badge

Auto-Refresh

  • data-update-interval - Refresh interval in ms
  • Set to 60000 for 1 minute
  • Set to 0 to disable
  • Recommended: 120000 (2 minutes)