Help & Support

Your Cbox embed code is available at your control panel. You need this code to install your Cbox on your website.

Also on that page is your Quick Link — a URL which you can use to access your Cbox directly in your browser or on your mobile device.

Once you have created your Cbox account, go to the Publish page of your control panel. The code and steps for embedding your Cbox are provided there for a number of common platforms.

If you install your Cbox and all you see is code, or nothing at all, your web host may be removing or otherwise interfering with the HTML iframe tags that Cbox uses. Your Cbox code needs to be pasted into an area of your site that accepts HTML without modification. This may mean switching your editor from "rich text" or "WYSIWYG" mode into HTML-editing or "raw" mode, or you may need to open your template files in a plain-text editor like Notepad.

Remember that you always have the option of posting or sharing your Cbox Quick Link — this gives visitors direct access to your Cbox in a full-screen layout, so it's perfect as a mobile option or for stand-alone use.

Go to the Theme editor in your control panel. There you can specify the fonts and colours of your Cbox, using a point-and-click editor. You can always reset your theme to one of the preset defaults there, if you would like to start again.

If you have a Premium or Pro Cbox you can edit CSS, which gives you complete control over presentation.

If you have a Premium or Pro Cbox, you can create a moderator name for yourself at your Users page, and then log in on your Cbox using the "profile" link. You will see a delete icon [x] next to each message in your Cbox, and you will not have to log in at your control panel at all to delete messages.

Alternatively, visit your Messages page to delete messages individually or in bulk. Deleted messages are removed from your public Cbox history, but are preserved in your Archives.

Yes. In the Theme editor, simply delete the colour codes for the main and form background ("BG") elements. This will make the Cbox transparent, allowing whatever is behind the Cbox to show through.

Note that any pop-ups generated by a transparent Cbox will have the default background colour — usually white. If your font colour is light, it may be invisible in popups. You can fix this by editing the CSS to introduce a background-color rule for popups.

Cbox provides a Theme editor that lets you adjust colours and font sizes. With a paid plan though, you get even more flexibility with our CSS editor.

Please note: Editing CSS is an advanced feature and requires some knowledge of the language. Improperly-formed CSS can make your Cbox unusable. You can find many useful CSS resources on the Web.

Some of the things you can do with custom CSS:

• Change colours and dimensions that aren't available in the theme editor.
• Add effects such as shadows, borders, and gradients.
• Change the layout of messages by adjusting positioning.
• Create custom classes for styling names and parts of messages, in conjunction with [class] boxcode and filtering.

Getting started

The class names and IDs that we use are relatively stable. However, while we always aim to minimize disruption, it is possible — due to new features or bugfixes, for example — that we have to change HTML in ways that require updating your CSS.

We recommend using your browser's built-in development tools to assist you in finding the names of elements and classes to edit. Generally, you can right-click on an element in your Cbox, and select "Inspect".

In the new version of Cbox, the CSS you enter in your editor is appended to the base CSS. This means you do not have to copy any classes or properties that you are not editing. For example, to make avatars round, simply use:

.pic {
    border-radius: 50%;
}

Notice that the other properties, such as width and height, are not affected by this CSS. Any properties that are bound to the basic theme editor can still be edited that way. We strongly recommend this approach — rather than copying the base CSS and then editing it — for both performance and maintainability reasons.

More examples

By default a star icon appears after mod/admin names. You can change or remove that:

.msg.Adm .nme:after, .usr.Adm .nme:after,
.msg.Mod .nme:after, .usr.Mod .nme:after {
    content: '';
}

You can use the :after pseudo-element to add text as well. This puts a colon after each name:

.msg .nme:after {
    content: ':';
}

You can also change the colour of mod/admin text or messages to distinguish them:

.msg.Adm {
    background: #FFEB3B;
    color: #000;
}

The following CSS will make the name and message run together without a line-break between them:

.msg .body {
    display: inline;
}

Certain buttons in the UI can safely be removed using CSS. For example, to remove the "pop out" button:

#btnPop {
    display: none;
}

You can use CSS to create a default profile picture:

.pic.Empty {
  background: url(https://cbox.im/i/zfqhv.c100.png) no-repeat center center;
  background-size: 100%;
}

You can take advantage of CSS's cascading nature to target different rules at the same element in different contexts. For example, to show rounded avatars in the users list, but hide them completely in messages, you could use a pair of rules:

.msg .pic {
    display: none;
}
.usr .pic {
    border-radius: 50%;
}

To change or remove the maximum height that Cbox restricts your emoticons to, you can use a rule like this:

.msg .emote {
    max-height: none;
}

The following rule makes message background colours alternate:

.msg:nth-of-type(2n) {
    background: #03A9F4;
}

With CSS you can influence browser functionality as well. The following CSS prevents users from being able to select text in messages:

.msg {
    user-select: none;
}

Custom classes

You can define your own classes to be used in conjunction with filters. Filters support boxcode, so you can apply colour that way. But for more flexibility, there's a special [class] boxcode that lets you use any CSS you want.

For example, this CSS rule targets a class called cc_glow.

.cc_glow {
    text-shadow: 0px 0px 3px #E91E63;
    font-size: 120%;
}

With the above CSS, the corresponding boxcode is [class=glow][/class].

So to use your CSS, you could add a filter rule like this:

hello:[class=glow]hello[/class]

With both the CSS and the filtering rule in place, simply typing hello in your Cbox should show glowing text.

You can also override existing boxcode rather than defining your own classes:

.msg .body s {
    text-decoration: none;
    opacity: 0.5;
}

The above modifies the [s][/s] boxcode which would normally produce a strikethrough. Instead it will produce translucent text. The .msg .body selectors are there to ensure only markup in messages is targeted.

Specificity

Sometimes you might find your edits don't appear to be overriding Cbox's base CSS. This can be due to CSS Specificity rules. You may need to add specificity by including more parts in your selectors. For example, to change the colour of the smilies/emoticons button, you can use:

form#frmMain button#btnSmilies {
    color: red;
}

Notice that while the form#frmMain part might seem redundant, it increases specificity sufficiently to override Cbox's base CSS. Alternatively, you can use the !important rule to achieve the same outcome.

While !important can make customization easier, we don't recommend using it, as it increases the likelihood of unintended side-effects.

button#btnSmilies {
    color: red !important;
}

You can change your Cbox's size on the Layout page of your control panel. Simply change the values for width and height, and then save your changes. You will then be informed that your code has been updated — go to your Publish page to get your new code, to reinstall your Cbox on your website.

If the message input area in your Cbox looks wrong, or cut off, you may need to increase the "Form height" setting, also at your Layout page.

Your Cbox does not in fact have to be a fixed size. You can edit your embed code directly to introduce relative widths and heights.

You can register a bot user at your Users page. Bot users are like ordinary registered users, except that instead of a password they are issued an access token. You cannot log in via the normal profile dialog. Instead, you can use the token directly in HTTP requests to Cbox.

We do not currently support an official API, but to demonstrate how you might read and post to your Cbox using a bot, the proof-of-concept PHP script below takes a simple HTTP-based approach. Run this script on your own server, and your bot will post to your Cbox. After its initial message, it will poll for messages containing trigger words, to which it will respond.

You can run the script from a shell, or have it run automatically with a crontab entry. When it's running, test it by entering a message in your Cbox such as "hello bot", "time?", or "what is the weather in new york?"

#!/usr/bin/php
<?php
define('LISTEN', true);
define('PID_FILE', './cboxbot.pid');

// Edit these lines for your Cbox and bot user. 
$box = array('srv' => 7, 'id' => 1, 'tag' => 'bOxTag');
$bot = array('name' => 'mybot', 'token' => 'XJC-bottoken-asKC', 'url' => '');
$msg = 'Hello world!';


$callmap = array(
	'/\bhello bot\b/iu' => 'bot_greet',
	'/\btime\?/iu' => 'bot_time',
	'/\bweather in ([a-zA-Z-0-9 ,]+)/iu' => 'bot_weather',
);

// Basic reply
function bot_time ($msg) {
	return date("M d Y H:i:s");
}

// An example incorporating message data. 
function bot_greet ($msg) {
	return "Hello ".$msg['name'];
}

// An example calling an external API
function bot_weather ($msg, $matches) {
	$place = $matches[1];

	if (!$place) {
		return;
	}

	$query = 'select * from weather.forecast where woeid in (select woeid from geo.places(1) where text="'.addslashes($place).'")';

	$url = 'https://query.yahooapis.com/v1/public/yql?q='.urlencode($query).'&format=json&u=c&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys';

	$out = file_get_contents($url);

	if (!$out) {
		return;
	}

	$wobj = json_decode($out);

	if (!$wobj->query->results) {
		return;
	}

	$cond = $wobj->query->results->channel->item->condition;
	$desc = $wobj->query->results->channel->description;

	return "[b]".$cond->text." ".$cond->temp."F [/b] (".$desc." at ".$cond->date.")";
}


// Do not edit past this point. 

set_time_limit(0);


$id = cbox_post($msg, $bot, $box, $error);

if (!$id) {
	echo $error;
}
else {
	echo "Posted ID $id\n";
}

if (!LISTEN) {
	exit;
}

// Synchronization.
// PID file is not removed on exit, but it is unlocked. A locked file indicates a running process.
$fp = fopen(PID_FILE, 'a+');

if (!flock($fp, LOCK_EX | LOCK_NB)) {
	echo "Could not lock PID file. Process already running?\n"; 
	exit;
}

ftruncate($fp, 0);
fwrite($fp, posix_getpid()."\n");
fflush($fp);

do {

	$msgs = cbox_get_msgs($id, $bot, $box);

	if (!$msgs || !is_array($msgs)) {
		sleep(5);
		continue;
	}

	$id = (int)$msgs[0]['id'];

	for ($i = 0; $i < count($msgs); $i++) {
	
		if ($msgs[0]['name'] == $bot['name']) {
			continue;	// Ignore bot's own messages.
		}
	
		$msgtext = $msgs[$i]['message'];
		
		foreach ($callmap as $expr => $func) {
			$matches = array();
			
			if (preg_match($expr, $msgtext, $matches)) {
			
				$reply = call_user_func($func, $msgs[$i], $matches);
				
				if ($reply) {
					cbox_post($reply, $bot, $box, $error);
				}
			}
		}
	}
	
	sleep(2);
} while (true);


function cbox_get_msgs ($id, $user, $box, &$error = '') {
	$srv = $box['srv'];
	$boxid = $box['id'];
	$boxtag = $box['tag'];
	
	$host = "www$srv.cbox.ws";
	$path = "/box/?boxid=$boxid&boxtag=$boxtag&sec=archive";
	$port = 80;
	$timeout = 30;

	$get = array(
		'i' => (int)$id,
		'k' => $user['token'],
		'fwd' => 1,
		'aj' => 1
	);	

	$req = '';
	$res = '';
	
	foreach ($get as $k => $v) {
		$path .= "&$k=".urlencode($v);
	}
	
	$hdr  = "GET $path HTTP/1.1\r\n";
	$hdr .= "Host: $host\r\n\r\n";
	
	$fp = fsockopen ($host, $port, $errno, $errstr, $timeout);

	if (!$fp) {
		$error = "Could not open socket: $errno - $errstr\n";
		return;
	}

	fputs ($fp, $hdr);
	
	while (!feof($fp)) {
		$res .= fgets ($fp, 1024);
	}
	
	fclose ($fp);

	if (!$res || !strpos($res, "200 OK")) {
		$error = "Bad response:\r\n $res";
		return;
	}

	$matches = array();

	preg_match_all('/\n([^\t\n]*)\t([^\t]*)\t([^\t]*)\t([^\t]*)\t'
.'([^\t]*)\t([^\t]*)\t([^\t]*)\t([^\t]*)\t/', $res, $matches);

	$msgs = array();

	$map = array('id', 'time', 'date', 'name', 'group', 'url', 'message');

	for ($m = 0; $m < count($map); $m++) {
		for ($i = 0; $i < count($matches[$m+1]); $i++) {
			$msgs[$i][$map[$m]] = $matches[$m+1][$i];
		}
	}

	return $msgs;
}


function cbox_post ($msg, $user, $box, &$error = '') {
	$srv = $box['srv'];
	$boxid = $box['id'];
	$boxtag = $box['tag'];
	
	$host = "www$srv.cbox.ws";
	$path = "/box/?boxid=$boxid&boxtag=$boxtag&sec=submit";
	$port = 80;
	$timeout = 30;

	$post = array(
		'nme' => $user['name'],
		'key' => $user['token'],
		'eml' => $user['url'],
		'pst' => $msg,
		'aj' => '1'
	);	

	$req = '';
	$res = '';
	
	foreach ($post as $k => $v) {
		$req .= "$k=".urlencode($v)."&";
	}
	$req = substr($req, 0, -1);
	
	$hdr  = "POST $path HTTP/1.1\r\n";
	$hdr .= "Host: $host\r\n";
	$hdr .= "Content-Type: application/x-www-form-urlencoded\r\n";
	$hdr .= "Content-Length: ".strlen($req)."\r\n\r\n";
	
	$fp = fsockopen ($host, $port, $errno, $errstr, $timeout);

	if (!$fp) {
		$error = "Could not open socket: $errno - $errstr\n";
		return;
	}

	fputs ($fp, $hdr.$req);
	
	while (!feof($fp)) {
		$res .= fgets ($fp, 1024);
	}
	
	fclose ($fp);

	if (!$res || !strpos($res, "200 OK")) {
		$error = "Bad response:\r\n $res";
		return;
	}

	$matches = array();

	preg_match('/1(.*)\t(.*)\t(.*)\t(.*)\t(.*)\t(.*)/', $res, $matches);

	$err = $matches[1];
	$id = $matches[6];

	if ($err) {
		$error = "Got error from Cbox: $err";
		return;
	}

	return $id;
}
?>

If you are a paid customer with a recurring payment profile (or subscription) at PayPal, then you can cancel it at any time. Your Cbox will not automatically be closed and if you have remaining credit it will continue to work. You will be able to upgrade or renew again manually — this is useful if you want to switch to a longer term.

Cancel an active payment profile with the following steps:

1. Go to PayPal.com and sign in.
2. Go to "Activity" for your transaction history.
3. Search for the email address "paypal@cbox.ws".
4. You should see your latest payment to Cbox. Click to view its details.
5. Locate the link to the profile or subscription on the payment details page.
6. From the recurring profile details, you will be able to cancel your subscription.

If you do not see a link to the profile or subscription from the payment details page, then it may have been a one-off payment with no associated automatic billing.

Renewal is straightforward — it's the same process as for upgrading, at this page.

When you renew, your paid term is extended with the additional time that you purchase, and if you have any remaining credit, it is carried forward. So for example, if you have 20 days remaining, and you purchase an additional six months, you will have six months plus 20 days' credit after renewal.