Javascript documentation

Options

Here is a full list of options you can use with the Javascript library:

    <script type="text/javascript">
        window.doorbellOptions = {
            hideEmail: true, // Optional, hides the email address field
            email: "customer@example.com", // Optional, prepopulate the email address field
            name: 'Philip Manavopoulos', // Optional, the name of the user
            tags: 'tag1,tag2', // Optional, tags to add to this thread. Can be an array as well: ['tag1', 'tag2']
            hideButton: true, // Optional, hides the button that doorbell adds to the bottom right of the page
            container: document.getElementById('feedback-container'), // Optional, make the form render inline instead of as a modal
            language: 'en', // Optional, if you know the language of the page or the user. You can then translate the form, the response messages, and the autoreply
            properties: { // Optional, a Javascript object of custom properties you want to set
                loggedIn: true,
                username: 'manavo',
                loginCount: 11,
                roles: ["admin", "editor"], // Arrays are fine
                contactDetails: { // Nested objects are allowed too
                    phone: "1234567890",
                    address: "Address line 1, Country"
                }
            },
            id: 'YOUR-ID-GOES-HERE',
            appKey: 'YOUR-API-KEY-GOES-HERE'
        };
    </script>
        

Note: Please note that you should use the hideEmail option with the "email" value set, otherwise the field will be blank and the user won't be able to submit the form.

Note: There is no z-index parameter. If it needs adjusting, you can do it from CSS (all elements get added to the DOM).

Note: In properties, arrays and nested objects will show up as pretty printed JSON.

Changing text in the form

You can change the text of the form or button in the Languages (i18n) section of your application's setup page.

Methods

There are there methods that you can call on the doorbell object:

• show()
• hide()
• remove()
• getProperty(name)
• setProperty(name, value)
• getOption(option)
• setOption(option, value)
• track(userID, eventName, attributes)
• send(message, email)
• refresh()

send

The send(message, email) method accepts 2 parameters: the message you want to send, and the email address. This can be used if you want to have your own form instead of Doorbell's default one. However, you'll have to use the callbacks to handle success and failure messages yourself.

setOption

The setOption(option, value) call, accepts 2 parameters: the option you want to set, and the value. This can be used if you have a single page app, so you can set the email address of the user who has logged in, or hide the email field after Doorbell has been initialized.

Example

    <script type="text/javascript">
        function showDoorbellModal() {
            doorbell.show(); // The doorbell object gets created by the doorbell.js script
        }

        function removeDoorbell() {
            doorbell.remove();
        }

        function sendFromMyForm() {
            var feedbackText = document.getElementById('myTextarea').value;
            var email = 'hello@example.com';

            doorbell.send(feedbackText, email, function() {
                alert('success');
            }, function(error) {
                alert('Oh no! '+error);
            });
        }

        function setEmailAddress() {
            doorbell.setOption('email', 'newemail@example.com');
        }

        function hideEmailField() {
            doorbell.setOption('hideEmail', true);
        }

        function trackEvent() {
            doorbell.track('user-123', 'logged_in', {'key': 'value'});
        }
    </script>

    <button type="button" onclick="showDoorbellModal();">Show Doorbell form</button>
    <button type="button" onclick="trackEvent();">Track event in Doorbell</button>
    <button type="button" onclick="sendFromMyForm();">Send</button>
        

Callbacks

There are 11 callback methods you can set:

    <script type="text/javascript">
        window.doorbellOptions = {
            // Optional, called when the SDK has loaded and is about to initialize
            onLoad: function() {},

            // Optional, called when the SDK has initialized (all elements added to the HTML)
            onInitialized: function() {},

            // Optional, called when the modal is about to be shown
            onShow: function() {},

            // Optional, called once the modal has been shown
            onShown: function() {},

            // Optional, called when the modal is about to be hidden
            onHide: function() {},

            // Optional, called once the modal has been hidden
            onHidden: function() {},

            // Optional, called when the feedback is about to be sent
            // Return false to stop the request from happening
            onSubmit: function() {},

            // Optional, called when the feedback is sent successfully
            onSuccess: function(message) {},

            // Optional, called when the feedback fails to be sent
            // Possible code values: 'missing-email', 'missing-message', 'message-too-short', 'invalid-email'
            onError: function(code, message) {},

            // Optional, called when a screenshot is about to be generated. Returning false cancels it
            onGenerateScreenshot: function() {},

            // Optional, callback when the screenshot is generated
            onScreenshotGenerated: function(screenshotDataURI) {}
        };
    </script>
        

Single Page Applications

If you have a SPA, you might need to update some settings without refreshing the page.

You can call doorbell.refresh(); (after calling setOption) to force Doorbell to regenerate the form with the new values.