zulip/static/templates/settings/bot-settings.handlebars

<div id="bot-settings" class="settings-section" data-name="your-bots">
    <div class="bot-settings-form">
        <div class="tip">
            {{#tr this}}Looking for our <a href="/integrations" target="_blank">Integrations</a> or <a href="/api" target="_blank">API</a> documentation?{{/tr}}
        </div>

        <div>
            <span>{{t 'Download config of all active outgoing webhook bots in Zulip Botserver format.' }}</span>
            <a type="submit" download="{{flaskbotrc}}" id= "download_flaskbotrc" class="btn" title="{{t 'Download flaskbotrc' }}">
                <i class="icon-vector-download-alt sea-green"></i>
            </a>
        </div>

        <ul class="nav nav-tabs nav-justified" id="bots_lists_navbar">
            <li class="active active-bots-tab"><a>{{t "Active bots" }}</a></li>
            <li class="inactive-bots-tab"><a>{{t "Inactive bots" }}</a></li>
            <li class="add-a-new-bot-tab"><a>{{t "Add a new bot" }}</a></li>
        </ul>

        <ol class="bots_list required-text" id="active_bots_list" data-empty="{{t 'You have no active bots.' }}">
        </ol>

        <ol class="bots_list required-text" id="inactive_bots_list" data-empty="{{t 'You have no inactive bots.' }}">
        </ol>

        <div id="bot_table_error" class="alert alert-error hide"></div>

        <div id="add-a-new-bot-form">
            <form id="create_bot_form" class="form-horizontal no-padding">
                <div class="new-bot-form">
                    <div class="input-group">
                        <label for="bot_type">
                            {{t "Bot type" }}
                            <i class="icon-vector-question-sign settings-info-icon bot_type_tooltip" data-toggle="tooltip"
                             title='{{t "Incoming webhooks can only send messages." }}'></i>
                        </label>
                        <select name="bot_type" id="create_bot_type">
                            {{#each page_params.bot_types}}
                                {{#if this.allowed}}
                                <option value="{{this.type_id}}">{{this.name}}</option>
                                {{/if}}
                            {{/each}}
                        </select>
                    </div>
                    <div class="input-group">
                        <label for="create_bot_name">{{t "Full name" }}</label>
                        <input type="text" name="bot_name" id="create_bot_name" class="required"
                               maxlength=100 placeholder="{{t 'Cookie Bot' }}" value="" />
                        <div><label for="create_bot_name" generated="true" class="text-error"></label></div>
                    </div>
                    <div class="input-group">
                        <label for="bot_short_name">{{t "Username" }}</label>
                        <input type="text" name="bot_short_name" id="create_bot_short_name" class="required bot_local_part"
                               placeholder="cookie" value="" />
                        -bot@{{ page_params.realm_bot_domain }}
                        <div>
                            <label for="create_bot_short_name" generated="true" class="text-error"></label>
                        </div>
                    </div>
                    <div id="payload_url_inputbox">
                        <div class="input-group">
                            <label for="create_payload_url">{{t "Endpoint URL" }}</label>
                            <input type="text" name="payload_url" id="create_payload_url"
                                maxlength=100 placeholder="https://hostname.example.com/bots/followup" value="" />
                            <div><label for="create_payload_url" generated="true" class="text-error"></label></div>
                        </div>
                        <div class="input-group">
                            <label for="interface_type">{{t "Outgoing webhook message format" }}</label>
                            <select name="interface_type" id="create_interface_type">
                                <option value="1">Zulip</option>
                                <option value="2">{{t "Slack compatible" }}</option>
                            </select>
                            <div><label for="create_interface_type" generated="true" class="text-error"></label></div>
                        </div>
                    </div>
                    <div class="input-group" id="service_name_list">
                        <label for="select_service_name">{{t "Bot"}}</label>
                        <select name="service_name" id="select_service_name">
                        </select>
                    </div>
                    <div id="config_inputbox">
                        {{#each page_params.realm_embedded_bots as |bot index|}}
                            {{#each bot.config as |config_value config_key|}}
                            {{partial "embedded_bot_config_item" "botname" bot.name "key" config_key "value" config_value}}
                            {{/each}}
                        {{/each}}
                    </div>
                    <div class="input-group">
                        <div id="bot_avatar_file"></div>
                        <input type="file" name="bot_avatar_file_input" class="notvisible" id="bot_avatar_file_input" value="{{t 'Upload avatar' }}" />
                        <button class="button white rounded small btn-danger display-none" id="bot_avatar_clear_button">{{t "Clear avatar" }}</button>
                        <button class="button white rounded" id="bot_avatar_upload_button">{{t "Customize avatar" }}</button> ({{t "Optional" }})
                    </div>
                    <p>
                        <div id="bot_avatar_file_input_error" class="text-error"></div>
                    </p>
                    <button type="submit" class="button white rounded sea-green" id="create_bot_button">
                        {{t 'Create bot' }}
                    </button>
                </div>
            </form>
        </div>

    </div>
</div>