# Examples of Custom Behavior

## Custom dial trigger

Rep.ai can be invoked by most HTML elements by adding an `onclick` attribute.

```markup
<button onclick="RepAI('dial')">Need live help?</button>
```

Or you can listen for the `click` event in JavaScript.

```javascript
var button = document.getElementById('my-button');
button.addEventListener("click", function() {
  RepAI("dial");
});
```

## Require permission before initializing

You can take the `RepAI("init")` snippet and call it at any point, including after the user has agreed to a permission (e.g. by clicking "accept" in a modal or banner.) However, **you still must keep the long part of the snippet that looks like `!function...` first**, in order to load the `RepAI` API.

Here's an example using a jQuery dialog, but it would work with any JavaScript framework.

```markup
<div id="dialog-confirm" title="Receive calls?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>
  Would you like to opt-in to receiving calls from our team during your session?</p>
</div>

<script>
  // Inject the RepAI API.
  !function(w,d){function e(e,n){w.RepAI.q=w.RepAI.q||[],w.RepAI.q.push([e,n])}if(!w.RepAI){var t=function(n){for(var t=arguments.length,i=new Array(t>1?t-1:0),r=1;r<t;r++)i[r-1]=arguments[r];e(n,i)};["init","identify","dial","alert","bookMeeting","hide","show","expand","collapse","connect","disconnect"].forEach((function(i){t[i]=function(){for(var t=arguments.length,i=new Array(t),r=0;r<t;r++)i[r]=arguments[r];e(n,i)}})),w.RepAI=t}var s=d.createElement("script");s.id="rep-ai-script",s.src="https://cdn.servicebell.com/main.js",s.async=1;var i=d.getElementsByTagName("script")[0];i.parentNode.insertBefore(s,i)}(window,document);

  // Pop open jQuery dialog to confirm they're OK with being called.
  $(function () {
    $("#dialog-confirm").dialog({
      resizable: false,
      height: "auto",
      width: 400,
      modal: true,
      buttons: {
        Accept: function () {
          RepAI("init", "YOUR_CLIENT_KEY_HERE");
          $(this).dialog("close");
        },
        Decline: function () {
          $(this).dialog("close");
        },
      },
    });
  });
</script>
```

## Handling missed calls

If you want to trigger custom behavior after a visitor tries dialing but nobody answers their request, you can listen to the `sb:dialmiss` event.

Here's an example that directs the visitor to the contact page if they're missed:

```javascript
window.addEventListener("sb:dialmiss", function() {
  window.location.href = "/contact-us";
});
```

## Show expanded widget, hide on collapse

If you want to keep the widget hidden most of the time, but expand it to let the user decide if they want to call or book a meeting (depending on availability) without immediately dialing, you can do that with a combination of `RepAI` methods and events.

```javascript
// Show & expand the widget.
RepAI("show");
RepAI("expand");

// If the visitor closes it after expanding, hide it completely.
window.addEventListener("sb:collapse", () => {
  RepAI("hide");
});
```

## Listen for initialization or error

If Rep.ai is initialized and triggered as a core part of your user flow, you may want to handle the UX of a user encountering an error with widget initialization.

```javascript
// On clicking a button, initialize the widget and dial.
const button = document.getElementById("call-button");
button.addEventListener("click", () => {
  button.disabled = true;
  RepAI("init", "CLIENT_KEY_HERE");
  RepAI("dial");
  
  // Widget initialized correctly.
  window.addEventListener("sb:initialized", () => {
    button.disabled = false;
  });
  
  // Widget encountered a critical error.
  window.addEventListener("sb:error", (ev) => {
    button.disabled = false;
    alert("Failed to start a call! Please contact support.");
    console.log("What happened?!", ev.detail);
  });
});
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.rep.ai/invoking-servicebell.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.