Build the future of communications.
Start building for free

JavaScript posts

  • By Ashley Boucher
    How Your Non-Profit Can Accept Mobile Donations Using Twilio Voice, TwiML Pay, and JavaScript Copy of C03 Blog Text.png

    Mobile donations are one tool you can use to encourage support of your non-profit organization. Supporters can donate directly over the phone using an automated system, powered by Twilio Voice.

    In this article, you’ll be building an app that responds to incoming calls by asking callers to enter a donation amount and then their credit card information. This information will be captured by your payment processor to complete the charge.

    To start accepting mobile donations, follow along with this article.

    Prerequisites

    To get started with this tutorial, you’ll need the following:

    Read More
  • By Miguel Grinberg
    Verify Your Users on WhatsApp with JavaScript and Twilio Verify Your Users on WhatsApp with JavaScript and Twilio

    Twilio Verify is an easy to use service for user verification. This service now includes support for WhatsApp one-time passcodes (in public beta, as of June 2022). In this tutorial you’ll learn how to implement a WhatsApp user verification flow in a JavaScript application, using Node.js and Express.

    Verification code sent to WhatsApp

    Requirements

    To work on this tutorial you will need the following items:

    Create a Twilio Verify service

    To use Twilio Verify in an application, a Verify service must be created first. Open the Twilio Console in your web browser, type verify in the navigation bar’s search box, …

    Read More
  • By Donal Toomey
    複数ユーザーで構成されるビデオセッションのユーザー体験を最適化する Improve the Efficiency of Your Multi-Party Video Experiences JP

    この記事はDonal Toomeyこちらで公開した記事(英語)を日本語化したものです。

    教育、社会交流、職場のコラボレーションなどのシナリオでは、誰もが会話に参加するために、複数ユーザーでも円滑に動作する優れたビデオ環境が不可欠です。その必要性や価値は明らかですが、ブラウザーやモバイルデバイス向けの、複数ユーザー対応の高性能なビデオアプリケーションの構築は困難です。構築するビデオUIは、直感的であるとともに、ユーザーが使用するデバイスやネットワークの種類を問わず優れたビデオ体験を提供する必要があります。

    2019年、Twilioはネットワーク帯域幅プロフィールAPIを導入しました。このAPIは、ユースケースに基づき帯域幅を特定の参加者に割り当てるのに役立ちます。今回Twilioでは、ネットワーク帯域幅プロフィールAPIの機能強化版をリリースしました。機能強化版では、帯域幅とCPUの両方について、複数ユーザー利用を意識した効率的なビデオアプリケーションの構築を支援します。この効率性により、ユーザーのコンピューターのファンがうるさく回転する状況がなくなり、ビデオ品質は向上し、開発者サポートの負担が軽減されます。その他のアップデート項目として、ビデオトラックのスイッチオフのきめ細かい制御や、ユニークなレイアウトの作成が可能となっています。本稿では、ネットワーク帯域幅プロフィールAPIの機能強化版を使用する利点と、その使用例をご紹介します。

    CPUリソースと …

    Read More
  • By Dhruv Patel
    Receive SMS Alerts for Email Opens and Clicks with Twilio SendGrid and Node.js SMS alerts for email opens and clicks header image (2)

    When it comes to messaging applications, read receipts are a common feature that allow you to know if your recipient has read your message. For email applications, this feature is very uncommon; however, when sending marketing and especially important emails, it's sometimes vital to know and keep track of whether your recipients have opened and read your email.

    When using Twilio SendGrid, keeping track of email engagement is seamless through Event Webhooks. Event Webhooks not only track the delivery status of your emails but also engagement events such as if an email has been opened or a link within an email has been clicked. Pairing open and click tracking for emails with Twilio’s Programmable SMS API will ensure you’re up to date on the status of your important emails.

    In this tutorial you’ll learn how to track and send SMS alerts for open and click events for your …

    Read More
  • By Lizzie Siegle
    SMS Notifications On Pageviews with Segment and JavaScript Copy of D03 Blog Image Round (2).png

    Twilio acquired Segment last year to help developers unify customer data across every customer touchpoint. I held off on using Segment for a while because I thought Segment was only for businesses, but I learned recently that I, an indie developer, have a use case for it. Read on to learn how to use Segment and Twilio Serverless to send SMS notifications when someone visits your website.

    Do you prefer learning via video more? Check out this TikTok summarizing this tutorial in two minutes!

    Prerequisites

    To follow along with this post, you need three things:

    Add a Segment Source

    First off, we need to add …

    Read More
  • By Miguel Grinberg
    How to Play Video Files in a Twilio Video Call How to Play Video Files in a Twilio Video Call

    A common need in video calling applications is to allow a user to play a media file for the other participants in the call. This can enable, for example, a teacher or doctor to share a recording with the call attendees.

    In this article I will show you how a participant in a Twilio Video call can share video and audio content in formats such as mp4 or webm.

    The MediaStream API

    The JavaScript version of the Twilio Video SDK uses existing APIs in the browser to obtain access to the camera and microphone. More specifically, it uses the MediaDevices.getUserMedia() function to access MediaStream objects for these devices, which expose the raw video and audio tracks that are then published to the video call.

    But the MediaStream APIs cover much more than webcams and microphones and can be used to obtain MediaStream objects from other sources. For example, the …

    Read More
  • By Phil Nash
    Twilio SendGridとNode.jsを使用してメール問い合わせフォームを構築 How to build an email contact form with SendGrid and Node JP

    この記事はPhil Nashこちらで公開した記事(英語)を日本語化したものです。

    Webサイトにメールアドレスを公開すると、スクレーピングされ、スパムに使用されるおそれがあります。この問題を回避し、同時に自身のWebサイトからメールで問い合わせを受け取れるようにする方法の一つとして、問い合わせフォームを構築することがあります。

    本稿では、Twilio SendGridベースの開発プロジェクトの一例として、ウェブサイト上で問い合わせフォームを構築し、メールアドレスを公開することなく問い合わせのメールを受け取れるようにする方法を説明します。

    プロジェクトはTwilio Functionsも使って構築しますが、本稿でご紹介するコードはあらゆるNode.js環境での使用に対応しています。

    APIによるメール送信との違い

    ユーザーがお問合せフォームを送信した際は、お問合せフォームを入力した人のメールアドレスを送信元とするメールがウェブサイト運営者に送信されることがよくあります。しかし、メール送信に関する信頼性を維持するため、Twilio SendGridは単一送信元として検証されたアドレス、または認証済みのドメインからの送信しか許可しません。

    そのため、提供されたメールアドレスをfromアドレスとして使用する代わりに、reply-toアドレスに設定できます。この方法であれば、Twilio SendGridは認証済みメールアドレスからメールを送信する一方で、受信 …

    Read More
  • By Ted Gieschen
    How to Collect Times and Dates in Voice Calls or SMS using JavaScript How to Collect Times and Dates in Voice Calls or SMS using JavaScript

    Twilio offers a wide variety of channels you can use to connect with your customers, for example, through an SMS or Phone Call. One of the ways you can use these channels is to collect data from your customers. Depending on the type of data, this can be a complex undertaking. Collecting individual words or numbers is usually pretty straightforward. However, when asking customers to share specific Times and Dates, this can be far more complex. A typical use-case might be the scheduling of an appointment. This is especially true when allowing customers to communicate in free form (for example, “I would like an appointment next Tuesday at 3 pm”).

    In this blog, I will show you how you can extract Times and Dates during a phone call using JavaScript and serverless Twilio Functions without the need for any 3rd party integrations.

    Prerequisites

    To build this solution, you will …

    Read More
  • By Naomi Pentrel
    Twilio's Unofficial Vote for the Eurovision Song Contest Twilio's Unofficial Vote for the Eurovision Song Contest

    Eurovision is near and while you can't officially vote just yet, we thought we'd allow the public to vote already - and not just for this year but for ALL Eurovision's that have happened since the beginning of Eurovision. That includes 2020 - the year Eurovision was cancelled.

    How do I vote?

    Text '2022' to one of the following numbers to get the list of all the 2022 participants and their youtube videos. Once you have picked a winner, text “2022 Country” to the same number (e.g. 2022 Germany).

    Netherlands: +3197010253872

    UK: +44 7401 199687

    Sweden: +46 70 192 18 32

    United States: +1 (267) 713-3577

    What about the other years... Could we maybe vote for those too?

    You can text any year from 1956 to 2022 to any of the above numbers and then vote for your favourite song.

    How do I see the results?

    You can see the …

    Read More
  • By Miguel Grinberg
    Synchronized State Variables for React using Twilio Sync Synchronized State Variables for React using Twilio Sync

    State variables are one of the most important building blocks in front end applications developed with the React library. When a state variable is updated, React automatically re-renders any application components that depend on it, ensuring that the application always displays updated information to the user.

    The automatic state update mechanisms in React are fantastic, but they are limited to a single instance of the application. Sometimes, however, an application needs state variables that are automatically synchronized across all running instances of the application. In this tutorial you are going to learn how to create a custom React hook that implements synchronized state variables using Twilio Sync as a cloud storage back end.

    Tutorial demonstration

    Requirements

    To work on this tutorial you will need the following items:

    Read More
  • Newer
    Older
    Sign up and start building
    Not ready yet? Talk to an expert.