Implementing Web-Based Calling in a Rails CRM Using Twilio

Use Case: Why Web-Based Calling?

2. Generate Access Tokens for Voice

    # app/controllers/twilio_tokens_controller.rb
    class TwilioTokensController < ApplicationController
      def new
        grant = Twilio::JWT::AccessToken::VoiceGrant.new
        grant.outgoing_application_sid = ENV['TWILIO_TWIML_APP_SID']

        token = Twilio::JWT::AccessToken.new(
          ENV['TWILIO_ACCOUNT_SID'],
          ENV['TWILIO_API_KEY'],
          ENV['TWILIO_API_SECRET'],
          [grant],
          identity: "user-#{current_user.id}"
        )

        render json: { token: token.to_jwt }
      end
    end

3. TwiML App Setup

• Voice Request URL: https://yourapp.com/voice
• Status Callback URL: https://yourapp.com/calls/status

4. Handle Incoming Voice Events

    # app/controllers/calls_controller.rb
    class CallsController < ApplicationController
      def connect
        number = params[:To]

        response = Twilio::TwiML::VoiceResponse.new do |r|
          r.dial(callerId: ENV['TWILIO_PHONE_NUMBER'], record: 'record-from-answer') do |d|
            d.number number
          end
        end

        render xml: response.to_s
      end
    end

5. Integrate Twilio Device on Frontend

    let device;

    fetch('/twilio_tokens/new')
      .then(response => response.json())
      .then(data => {
        device = new Twilio.Device(data.token);
      })
      .catch(error => {
        console.error('Error fetching Twilio token:', error);
      });

6. Register Event Listeners

    device.on('ready', () => {
      console.log('Device is ready');
    });

    device.on('error', (error) => {
      console.error('Twilio Device Error:', error);
    });

    device.on('incoming', (call) => {
      call.accept();
    });

7. Start Outbound Calls

    document.getElementById('callBtn').onclick = () => {
      const number = document.getElementById('phoneInput').value;
      device.connect({ To: number });
    };

8. Add Hold & Transfer (Advanced Controls)

    # Transfer Example
    client.calls(call_sid).update(
      url: "https://yourapp.com/transfer"
    )

9. Refresh Tokens Automatically

    device.on('tokenWillExpire', async () => {
      const newToken = await fetchNewToken();
      device.updateToken(newToken);
    });

10. Fetch Recordings and Log Errors

    # app/controllers/recordings_controller.rb
    class RecordingsController < ApplicationController
      def create
        # Save recording URL and related info
      end
    end

Post-Implementation: Viewing Call History

•  Contact name and number
• Timestamp
• Call duration
• Recording playback button
  

Using AI to Summarize and Analyze Call Recordings

•  Key problems or concerns raised by the customer
• Promised actions or follow-ups
• Sentiment or tone of the conversation
• Any objections or blockers
• Next steps for the sales or support team

Bonus: Real-Time Notifications with ActionCable

To truly feel real-time, your CRM should react to call events instantly. ActionCable lets Rails
broadcast call state changes (like new incoming call or call ended) to the frontend in
real-time.

This creates a seamless, modern UX that keeps agents focused and informed.

By integrating Twilio Voice into your Rails CRM, you turn a basic tool into a full-featured
communication system. It empowers teams to call faster, track better, and engage more professionally; all without leaving the browser.

Final Say!

Web-based calling inside your CRM isn’t just a technical upgrade; it’s a complete workflow transformation. From seamless in-browser calls to auto-recording, and from AI-powered summaries to real-time notifications, it’s all about smarter communication and better customer experiences. Whether you’re building from scratch or enhancing an existing CRM, integrating Twilio Voice with Rails and layering it with AI-driven features can unlock powerful operational advantages.

To bring this vision to life, you can partner with a CRM and AI solution development company that understands both telephony and intelligent automation. With the right team, you can create intuitive, scalable systems that empower your sales and support teams while staying ahead of the curve. Let tech handle the backend; so your team can focus on closing deals and building stronger customer relationships.