Basic usage

Add {% load otreechat %} to the top of your template, e.g.:

{% load staticfiles otree_tags %}
{% load otreechat %}

Then wherever you want a chatbox in the template, use:

{% chat %}

This will make a chat room among players in the same Group, where each player’s nickname is displayed as “Player 1”, “Player 2”, etc. (based on the player’s id_in_group).

Customizing the nickname and chat room members

You can pass optional parameters channel and/or nickname like this:

{% chat nickname="abc" channel="123" %}

class Player(BasePlayer):

    def role(self):
        if self.id_in_group == 1:
            return 'Seller'
        else:
            return 'Buyer'

    def chat_nickname(self):
        return 'Group {} {}'.format(self.group.id_in_subsession, self.role())

{% chat nickname=player.chat_nickname channel=player.role %}

{% chat channel=group.id_in_subsession %}

{% chat channel=1 %}

Styling

To customize the style, just include some CSS after the {% chat %} element, e.g.:

{% chat %}

<style>
    .otree-chat__messages {
        height: 400px;
    }
    .otree-chat__nickname {
        color: #0000FF;
        font-weight: bold;
    }
</style>

You can also customize the appearance by putting it inside a <div> and styling that parent <div>. For example, to set the width:

<div style="width: 400px">
    {% chat %}
</div>

Multiple chats on a page

You can have multiple {% chat %} boxes on each page, so that a player can be in multiple channels simultaneously.

For example, this code enables 1:1 chat with every other player in the group.

class Player(BasePlayer):

    def chat_nickname(self):
        return 'Player {}'.format(self.id_in_group)

    def chat_configs(self):
        configs = []
        for other in self.get_others_in_group():
            if other.id_in_group < self.id_in_group:
                lower_id, higher_id = other.id_in_group, self.id_in_group
            else:
                lower_id, higher_id = self.id_in_group, other.id_in_group
            configs.append({
                # make a name for the channel that is the same for all
                # channel members. That's why we order it (lower, higher)
                'channel': '{}-{}-{}'.format(self.group.id, lower_id, higher_id),
                'label': 'Chat with {}'.format(other.chat_nickname())
            })
        return configs

{% for config in player.chat_configs %}
    <h4>{{ config.label }}</h4>
    {% chat nickname=player.chat_nickname channel=config.channel %}
{% endfor %}