DEV Community: Colby Garland

How I Got Caller ID Working in Canada Using RingCentral, Twilio, and ElevenLabs

Colby Garland — Thu, 11 Dec 2025 18:18:35 +0000

Background

ElevenLabs is “the most realistic voice AI platform” (their words), and it really is fantastic. I have been using it to automatically call people, leave messages, and run outbound phone workflows. Since the business already had a Twilio number, I used ElevenLabs' Twilio starter kit for outbound calling.

The app worked beautifully, except for one big problem.

The Problem

Caller ID simply did not work.

Even though the Twilio number had a name set, calls were coming through as just the phone number. And let’s be honest, nobody answers mystery numbers these days 😅.

This was killing our answer rate because the agent was leaving tons of voicemails since people did not know who was calling.

Why Caller ID in Canada Is Weird

In the United States, caller ID is driven by the CNAM database.

Canada does not have this.

Instead, Canadian carriers such as Telus, Bell, and Rogers control caller name lookup themselves. That means:

CNAM registration in Twilio does nothing
Caller ID must originate from a number registered with a Canadian carrier
Twilio's Branded Calling pilot is mostly focused on the US (I applied and was rejected because our account was too small)

So the Canadian telecom monopoly strikes again 😔.

Exploring Solutions (and Hitting Dead Ends)

1. Twilio Fix Attempts

I tried everything:

Setting CNAM fields
Testing different API configurations
Applying for Branded Calling
Double checking every setting in the Twilio console

Nothing worked.

2. SIP Trunking: Initial Hope

I started digging into SIP trunking.

SIP trunking is an internet based replacement for traditional phone lines (PSTN or ISDN). It lets businesses make and receive calls over IP instead of physical lines.

ElevenLabs supports SIP trunking, so this seemed promising.

However, caller ID would still depend on having a Canadian registered number on the SIP provider. That meant SIP alone was not a solution.

3. RingCentral Plus Telus: Another Possible Path

We did have a Telus registered number through RingCentral. Telus Business Connect is essentially RingCentral under the hood.

RingCentral also has a great API and supports SIP trunking.

I set up:

SIP trunking in ElevenLabs
A SIP enabled extension in RingCentral

Then I hit another blocker.

RingCentral only allows SIP connections through their internal network. They do not allow external services like ElevenLabs to connect.

Another dead end.

The Shower Thought

While washing my hair, I suddenly thought:

What if I place the call using RingCentral, which gives proper caller ID, and then transfer or bridge the call to Twilio or ElevenLabs afterward?

I tried it.

I could place the call through RingCentral and the caller ID worked.

But the audio routing did not cooperate.

RingCentral greetings still played
The ElevenLabs audio did not come through
Conference or bridge attempts did not solve it

Close, but still not usable.

The Actual Solution

The answer turned out to be much simpler than expected.

Let RingCentral call Twilio directly.

Here is the flow:

Set the RingCentral (Telus) number to forward all calls to a Twilio number.

Caller ID stays intact because RingCentral is the origin of the call.
Configure the Twilio number to trigger a webhook on inbound calls.

The webhook points to your app with the ElevenLabs agent.
Handle the call in your app like any normal inbound Twilio call.

ElevenLabs takes over from there.

Why This Works

The call originates from a Canadian carrier, which preserves caller ID
Twilio only handles the call after it is already ringing, so CNAM is not needed
The ElevenLabs agent behaves exactly like a normal inbound Twilio call
No SIP trunking or bridging complexity is required

The first time I answered my phone and saw the company name and heard the ElevenLabs voice agent start speaking, I was stunned. It finally worked.

The Results

You can see in this screenshot people are picking up more calls because of the caller ID!

TL;DR

Forward your RingCentral (Telus) number to your Twilio number
Configure Twilio to fire a webhook on inbound calls
Handle the call in your app using your ElevenLabs logic

Mocking function calls with Jest

Colby Garland — Wed, 04 Aug 2021 21:27:09 +0000

Imagine you have an API class, that you use to make all of your api calls with.

class API {
  login(username, password){ /* logic */ }
  logout(){ /* logic */ }
  getCurrentUser(){ /* logic */ }
}

When we write automated tests using Jest (https://jestjs.io/) we want to "mock" these calls, since we don't want to be hitting the api each time we run our tests.

Luckily, Jest has this functionality for us, built-in :)

Let's create our mock function:

function mockLogin(){
  jest.spyOn(API, 'login').mockImplementation(() => {
    return {
      success: true
    }
  }
}

Now in our test, we can mock this call before we make it:

it('user can login with correct username and password', () => {
  mockLogin();
  const api = new API();
  const response = api.login('colbygarland', 'hunter12');
  expect(response.success).toBe(true);
});

You can rinse and repeat this for any API functions you want to mock - you can decide what data to return back, as if the api was actually sending it back :)

Try..catch..finally in JavaScript

Colby Garland — Wed, 28 Jul 2021 19:39:43 +0000

Too often I find myself writing this type of code:

function cleanup(){ 
  // Doesn't matter what this does, it just needs 
  // to be run after the function is done doing the thing
}

function doTheThing(){
  try {
    // do something that could throw an error
    cleanup();
    return results;
  } catch(error) {
    // handle the error
    cleanup();
    return error;
  }
}

const result = doTheThing();

Essentially, cleanup() needs to be ran regardless if our function was successful or not. Luckily, JS provides a nice way to do that for us 🥳

function cleanup(){ 
  // Doesn't matter what this does, it just needs 
  // to be run after the function is done doing the thing
}

function doTheThing(){
  try {
    // do something that could throw an error
    return results;
  } catch(error) {
    // handle the error
    return error;
  } finally {
    // the finally block gets run regardless of 
    // whether we had an error or not
    cleanup();
  }
}

const result = doTheThing();

So using finally can clean up our code quite a bit!

Using TypeScript Interface in React Components

Colby Garland — Thu, 22 Jul 2021 22:15:24 +0000

One of my favorite parts of writing React components with TypeScript is interfacing all of my components.

Take a simple component:

export const MyButton = (props) => {
  return <button class={props.type} id={props.id}>{props.title}</button>
};

So our component, <MyButton /> takes a type, an id, and a title. This is fine, however if I was importing this component into another file, how would my editor know what props this component takes?

Enter interface.

interface MyButtonProps {
  id: number;
  type: string;
  title: string;
}
export const MyButton = (props: MyButtonProps) => {
  return <button class={props.type} id={props.id}>{props.title}</button>
};

Now, when we import this component into another file, VS Code will know what props this component has. 🎉

Using VS Code to git rebase

Colby Garland — Tue, 20 Jul 2021 15:23:40 +0000

Git rebase is a powerful, albeit confusing tool. I primarily use rebase to squash my commits before I PR my branch into main. This tutorial will show you how to use VS Code to visually do this process.

Prerequisites

You will need to install this VS Code extension: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

You will also need to enable "force push":

In settings, search for "git allow force push" and check the box

Optional but recommended: set VS Code as your git editor:

git config --global core.editor "code --wait"

Let's Begin!

Ensure your local branch you are rebasing onto (in our case, main) is up to date.
Switch to your feature branch (the branch you have been working on)
Type in git rebase -i main, where main is the branch you are rebasing onto
You will then see the codelens rebase screen, where you can choose what to do with each commit. We are going to squash every commit, and reword the last one into a good commit message.
Once you have your commits ready, we can click the Start Rebase button.
You will then be presented with a screen in VS Code to reword your commit message. Write your new message, and save and close the file to continue.
After this, our rebase is complete. However, now we must force push to remote. In your version control panel, click on the kebab menu (3 dots) and under the Pull, Push menu, choose Push (Force). Use this with caution, especially when working with other developers, as force push is destructive.

And we are done! A very easy way to rebase and squash all your commits using VS Code.

Logging Exceptions via Slack in Laravel

Colby Garland — Tue, 20 Jul 2021 15:02:23 +0000

Logging can be a powerful tool that people tend to gloss over. Most developers still view logging as an archaic way of dealing with bugs and user issues. Laravel has a very easy and eloquent way of dealing with the logging problem.

The Problem

Logging is usually done by creating a log file on your server, and telling your backend to send all errors to that file. While this is a good temporary solution, this system tends to fill up fast, and is a pain to search and find certain things.

The Solution (one of many)

Using Laravel’s built-in logging system, you can log to many different “channels”, including our old tried and true, file logging on the server. But that isn’t why you are reading this post, is it?

Slack it to me

If you have ever used Slack, you’ve grown to love the instant messaging capabilities, and the searching function. Search is great on Slack. And one of our problems with logging was search, wasn’t it? Wouldn’t it be great if we could log all our errors to Slack? Good news!

How to log exceptions to Slack

Logging is relatively easy in Laravel (see this page for how-to setup Slack logging). What we want is to nicely log all our exceptions.

This post is written assuming you have a Laravel project already set up.

Open your app/Exceptions/Handler.php handler file. This is where Laravel gives you the option to send exceptions to Sentry, Bugsnag, or any other bug reporters you want to set up. This is also where we will be logging to our Slack channel.

public function report(Exception $exception)
{
    parent::report($exception);
}

We are going to change this function to do a few things.

Log to Slack (that is why you are here!)
Format the exception nicely.
We will do an optional filter to filter out any vendor code.
Remove the parent::report($exception) as we are going to be doing this ourselves.

Our function will now look like this:

public function report(Exception $exception)
{
    // You can specify which exceptions not to report here
    if ($this->shouldntReport($exception)) {
        return;
    }

    // We are getting the directory so we can filter out any vendor code,
    // along with the directory, so it looks better for the developer.
    $dir = substr(__DIR__,0,-14);
    $backtrace =  $exception->getTraceAsString();
    $backtrace = str_replace([$dir],"", $backtrace);
    $backtrace = preg_replace('^(.*vendor.*)\n^','',$backtrace);

    // And finally, we log the exception! 
    Log::channel('slack')->error('@here'.PHP_EOL.' . PHP_EOL . '**Error:** '.$exception->getMessage() . PHP_EOL. '**Line:** ' . $exception->getLine() . PHP_EOL. '**File:** '. $exception->getFile() . PHP_EOL . '**Trace:**'.PHP_EOL. $backtrace);
}

And that’s it! It is very easy to nicely log your exceptions using Laravel’s built-in logging system.

image credits: https://unsplash.com/photos/gNoqNvYAsBg

Create a useStore hook for mobx-state-tree

Colby Garland — Mon, 19 Jul 2021 20:53:56 +0000

Mobx-state-tree?

From the mobx-state-tree docs:

MobX is a state management "engine", and MobX-State-Tree gives it structure and common tools you need for your app.

This post will help you to create a useStore hook to use MST in functional components in a React project.

Note: this post will be written in TypeScript.

Let's Get Hooked

First things first, let's create our "root store" (this will be our store that will hold our of other stores - more on that later)

/// src/stores/rootStore.ts

import { types } from 'mobx-state-tree';

export const rootStore = types
  .model({})
  .create({});

Explanation

From MST, we import the types. This allows us to create a "model", which will hold our data, as well as computed data, and actions to update our data.

Context is Key

To use our hook in our React app, let's utilize React's Context API to help us do that.

/// src/stores/rootStore.ts

// Add `Instance` to our import from MST
import { type, Instance } from 'mobx-state-tree';

const RootStoreContext = createContext<null | Instance<typeof rootStore>>(null);
export const StoreProvider = RootStoreContext.Provider;

/// src/app.tsx

import { StoreProvider, rootStore } from './stores/rootStore';

export default function App(){
  return (
    <StoreProvider value={rootStore}>
      { /** rest of your app here */ }
    </StoreProvider>
  );
}

Explanation

We will wrap our app with this StoreProvider and pass as its value, our rootStore from above.

Now to create the hook

/// src/stores/rootStore.ts

export function useStore(){
  const store = React.useContext(RootStoreContext);
  if(store === null){
    throw new Error('Store cannot be null, please add a context provider');
  }
  return store;
}

Add some models

Now we can use this, but first, let us add a store into our rootStore so we can utilize this.

/// src/stores/userStore.ts

import { types } from 'mobx-state-tree';

// example store, replace this with your actual stores
export const UserStore = types
  .model('UserStore')
  .props({
    id: types.identifier,
    name: types.string,
  })
  .actions((self) => ({
    setName: (name: string) => {
      self.name = name;
    }
}));

export const UserStoreInitialState = {
  id: '',
  name: '',
}

/// src/stores/rootStore.ts

import { UserStore, UserStoreInitialState } from './userStore';

export const rootStore = types
  .model({
    userStore: UserStore,
  })
  .create({
    userStore: UserStoreInitialState,
  });

Using our new hook

/// src/components/user.ts

import { useStore } from '../stores/rootStore';

export function User(){
  const { userStore } = useStore();
  return (
    <div>
      <h1>{userStore.name}</h1>
      <button onPress={() => {
        userStore.setName('Colby');
      })>Update Name</button>
    </div>
  );
}

What about re-rendering?

If you want your component to automatically re-render when state changes, use the mobx-react-lite package.

/// src/components/user.ts

import { useStore } from '../stores/rootStore';
import { observer } from 'mobx-react-lite';

export function User observer((){
  const { userStore } = useStore();
  return (
    <div>
      <h1>{userStore.name}</h1>
      <button onPress={() => {
        userStore.setName('Colby');
      })>Update Name</button>
    </div>
  );
});

Wrapping any component that "observers" an MST model's state will automatically re-render when that state changes.

All done!

And that's it! Mobx-state-tree (combined with mobx-react-lite for re-rendering) are amazing tools to keep in your tool belt, and a nice alternative to Redux (a lot less code to write to achieve what you want).

image credit: https://unsplash.com/photos/c9FQyqIECds