DEV Community: Meredith Hassett

Streamlining Real Estate content creation

Meredith Hassett — Tue, 06 May 2025 14:42:51 +0000

In today’s fast-moving real estate market, marketing is constant, high-volume, and essential. Every property—past, present, and future—needs its own set of branded assets: flyers, brochures, social posts, signage, and more. Canva has become a go-to tool for agents, brokers, and marketing teams to create these assets quickly and beautifully.

If you’re in the real estate tech space, building a Canva App can offer a serious competitive advantage, with teams at eXp, Cloze, and Ray White already seeing huge benefits for their teams. Whether you're managing a brokerage platform, CRM, or listing syndication service, integrating directly with Canva lets your users seamlessly access listing assets inside the Canva editor—boosting productivity and brand consistency.

Here’s why and how to do it.

Why Real Estate Professionals Use Canva (And Why You Should Integrate With It)

Real estate teams rely on Canva for:

High-frequency marketing: Each listing needs multiple creative assets.
Design flexibility: Templates, branding kits, and team collaboration tools.
Device flexibility: Mobile-first agents and desktop-based marketers both benefit.

Many companies—large and small—have already built public or private Canva apps to streamline real estate marketing workflows. These apps connect property databases, image libraries, and listing metadata directly into Canva. The result? Less time copy/pasting, more time selling.

Common Use Case: You Need an App That...

Most teams end up needing an integration that:

Pulls listing data (photos, text, metadata) from their system
Supports listings across all statuses (live, pending, sold, etc.)
Organizes content in a structured, browsable format
Works well on both mobile and desktop
Allows users to drag images and text into designs
Optionally, exports finished designs back to their source system

We know many teams end up printing their designs. At the time of publication of this guide, exporting as Print Quality PDF isn't currently supported using the API. If your team needs to print these created resources, it would be best to manually download instead of programatic API export.

Let’s walk through the architecture and some practical implementation tips.

Step 1: Connect to Your Source System

While many Canva apps avoid a login-first flow, real estate integrations are an exception. Users need access to their own listings, which usually requires authentication. Many real estate companies also choose to make their Apps team restricted. Since these apps are specific to the team, the advertising in the Apps Marketplace may not be necessary. For the team restricted real estate app to work best, make sure the organization is all in one Canva Team or Enterprise account.

We recommend using OAuth 2.0 for secure, token-based auth. We’ve created functions to help manage access and token refresh. Remember to register your app on your 3rd party service.

When building out the Auth flow, we know most development teams build it once and then never touch it again. To make it easier to build our auth, we have created auth patterns and samples to simply the UX and token exchange. Check out our sample auth flow on GitHub.

To get started with Auth, simply import the auth resource from the Canva User API:

import { auth } from "@canva/user”

Step 2: Your backend code for your Canva app

When building Canva apps, Canva hosts the frontend/UI of the app in the editor, so any backend services you need will have to be self hosted. You can use any cloud provider or hosting service. Canva frontends use browser fetch to communicate with their backends, so just make sure your backend architecture supports fetch calls.

Many teams handle OAuth in the backend. This adds an additional layer of security, as the browser can always be inspected to find keys or tokens. We have found most teams backends typically consists of an authorization layer, that connects the frontend to the MLS datasource.

After gaining authorization to the MLS datasource, your app will need to pull in the actually listing data. Some data manipulation may also be needed, as listing information can come in different formatting. Also consider any potential sorting, filtering, or paging you may want to do.

Step 3: Organize Listing Resources

Once your user have access to your listing data, it’s time to access those resources in an organized way. Keep in mind real estate assets work best when visually and contextually grouped. One common pattern we see among our real estate apps is organizing listings this way:

Tabs = Listing status
- Active, Pending, In Escrow, Sold, For Rent, Rented, etc
Top-level folders = Properties
Inside folders = Photos and Text Content

We’ve created a pattern called SearchableListView that supports this general structure. SearchableListView lets you to define a layout, which it would be best to use List or Full Width for the real estate listing use case. This makes sure that properties are quickly browsable by agents. It’s supports a tabbed structure to quickly layout the top filter your team may use. To enable tabs, use the containerTypes config, and specify an array similar to below. See all the configs in the documentation.

[
  {
    "value": "collection",
    "label": "Collections",
    "listingSurfaces": ...
  },
  {
    "value": "section",
    "label": "Sections",
    "listingSurfaces": ...
  },
  {
    "value": "folder",
    "label": "Folders",
    "listingSurfaces": ...,
    "icon": "folder"
  }
]

You can also provide filtering and sorting options, which are fully customizable to match your teams need.

When laying out properties, we would recommend keeping a folder like experience with an optional hero image and clear text for the property, most likely it’s address. You can use components like our image cards or horizontal cards. Make sure to use the rows layout component to keep the look and feel clean.

Step 4: Keep the metadata clean

Each property will have both text and image assets. Your user’s properties may also have videos. When an agent clicks into a singular listing, they will need to be able to locate assets quickly and efficiently. Organizing them by type, text or image, the agents will be able to quickly get to the metadata they need.

When building out the individual listing pages, you can also use tabs to make it easy to switch between the types of assets. Tabs are also flexible, so if you need an optional 3rd tab for videos on some listings, it’s easy to include more in the list.

For the assets within the tabs, your users may be on desktop or mobile, so make sure to support both drag and click actions. To support both onDragStart and onClick functions, we’ve created some helpful components:

For the image layout, image cards can be used in a masonry layout. Masonry is the best way to optimize screen layout utilization and is responsive to screen and editor size. There’s a great example of the masonry component in our GitHub sample code library.

<ImageCard
  onClick={() => {}}
  onDragStart={() => {}}
  thumbnailUrl=”ADD YOUR URL HERE”
/>

  <TypographyCard
    onClick={() => {}}
    onDragStart={() => {}}
  >
    <Text> ADD YOUR TEXT HERE </Text>
  </TypographyCard>

Step 5: Exporting Designs Back to Your System (if needed)

Want to close the loop? You can include an export capability so that users can save their finished Canva designs (e.g., brochures or social posts) back to your platform or listing CMS. The Canva design API lets you to request design exports as common file types like PNG, PDF, video, and PPTX. Once an export is complete, you will receive an export blob. Make sure your source system can accept the exported blob. As a reminder, this API at time of publishing this guide doesn't support exporting as print quality PDF, so if these resources will be printed, it is best to manually export.

To get started with exporting, import the requestExport resource from the design API.

import { requestExport } from "@canva/design";

There’s sample code available on GitHub.

Templates and Sample Code

Much of this logic is already encapsulated in our Digital Assets Management template and accessible in the Canva CLI. You’ll find:

Auth flow examples
Container and card layouts
Tabbed views and filters
Drag-and-drop image and text components

Try out using the DAM template to help you get started. You can quickly spin up the DAM example directly from your command line tool of choice. Make sure you have node and npm installed and run this command to install our CLI.

npm install -g @canva/cli@latest

Once the CLI is installed, you can run the create command to generate all the code needed for the DAM template.

canva apps create --template "dam"

And as always you can find more sample code in our GitHub repo. Each new API we release always comes accompanied by sample code, as well as some of our more complex UI patterns.

Closing out

For real estate tech platforms, Canva integration isn’t just a nice-to-have—it’s a productivity unlock for agents and teams under constant marketing pressure. By meeting your users where they already work (Canva), and feeding them the assets they already own (listings), you reduce friction and boost results.

Ready to build your Canva app? Talk with your team about their requirements first. And then explore all the tools we have like the CLI and templates, and use this guide to structure your integration with some of Canva’s best practices.

Introducing the Canva Dev MCP Server

Meredith Hassett — Wed, 16 Apr 2025 00:00:00 +0000

AI coding assistants can significantly boost developer velocity but can struggle when they lack platform-specific knowledge. For example, Canva developers face the frustration of having to repeatedly teach AI assistants about Canva's unique components, patterns, and best practices in every new session.

To help solve this, we're excited to introduce the Canva Dev MCP Server: a tool designed to transform your AI assistants from generic coding helpers into Canva development experts.

What is the Canva Dev MCP Server?

Let's first define the Model Context Protocol (MCP):

MCP is an open protocol that standardizes how applications provide context to LLMs. Think of MCP like a USB-C port for AI applications. Just as USB-C provides a standardized way to connect your devices to various peripherals and accessories, MCP provides a standardized way to connect AI models to different data sources and tools.

— Model Context Protocol Documentation

Building on this foundation, the Canva Dev MCP Server provides comprehensive, real-time Canva development context and tools to LLMs to help you build on Canva faster.

What can you do with the Canva Dev MCP Server?

Let's dive straight into some demos, to give you a glimpse of what you can do with the Canva Dev MCP.

1. Generate Canva apps

With a single prompt, the MCP Server can create a fully structured app that follows established best practices, by invoking the Canva CLI app generator. Then, once your app is created, it can help you add new features using various methods from the Apps SDK.

Video demo of generating Canva Apps with prompts in VS Code

2. Adopt the App UI Kit

Migrate your existing UI to the App UI Kit components, to ensure consistency in both functionality and aesthetics across your app.

Video demo of applying the Canva UI Kit to your app in VS Code

3. Localize your app

Integrate your app with our App I18n Kit, to rewrite your UI to be localizable with clear translator notes.

Video demo of updating your app to include i18n strings

4. Comply with Canva's design guidelines

Run our Design Review tool to ensure your app UI adheres to Canva's standards. The MCP Server can generate a report with must/should/could recommendations based on Canva's design guidelines, and even give suggestions on improvements to your code.

Video demo of doing a quick app review before submitting

5. Integrate with AI chat assistants

The MCP Server can also be integrated with AI chat assistants like Claude, where you can chat about the Canva Apps SDK or Connect APIs.
Your favorite chat assistant can now also be your personal Canva development expert!

Video demo of chatting with Claude to to deep dive into Canva Dev documentation

6. Integrate with Canva via the Connect API

Last but not least, you can build integrations with Canva via the Connect API, by generating Canva Connect API client code to create new designs or upload assets.

Video demo of using Claude to write code for a Canva Integration

There are many more use cases to explore, so we're excited to see what you'll build!

Next steps and future plans

We're just getting started with AI-assisted app development. Expect ongoing enhancements and new capabilities based on your invaluable feedback via our community forum.

Check out the setup guide now to unlock the full power of AI-assisted development for Canva Apps and Integrations.

Happy hacking!

Apply Canva Brand Templates with the Autofill API

Meredith Hassett — Wed, 09 Oct 2024 00:00:01 +0000

Protecting brand integrity means sometimes defending a brand fiercely, and always applying the brand design consistently. If your project or web app can’t provide your customers a consistent way to find and apply brand templates, you risk spending time catching up on repeated request for a brand template feature. Canva Connect API provides the solution, giving your customers consistency in how they:

Access and apply Canva Brand Templates.
Automatically fill out new designs from templates.

This guide shows you how to build an example integration using the Brand template and Autofill APIs to access Canva Brand Templates and apply them consistently to a design. These APIs let your web app apply a Canva Brand Template to a Canva design entirely within your integration. Your customers won’t need to use the Canva editor to edit their design manually.

You can try out the APIs right now:

From the docs page (be aware this sends API requests to your Canva account's live data).
Using the Canva Connect API Starter Kit, which provides a working e-commerce web app showcasing the API's features.

When you're ready to use the Autofill API for your own applications, see the Autofill guide. It explains how to create a Canva Brand Template and apply it to a new design automatically.

Before you begin

Before applying a brand template, you need:

A Canva account: With multi-factor authentication enabled.
An integration in your account: To connect your application to Canva, prepare for authorization, and configure API scopes.
Autofill API access: When you've created your integration, register for access (under Scopes > Data autofill APIs, click the Register for access button).
A Canva Brand Template: To create one, you need a Canva Teams account. A free trial is available.
An access token: To create a token:
1. Create an authorization URL to get an authorization code.
2. Generate an access token using a request to the Authentication API.
Tools:
- Text editor
- Command-line shell with the Node.js CLI (version 18 or higher) installed.

When you have your access token ready, you can use it to test out the Brand template and Autofill APIs.

Access tokens have a limited lifespan. When your current token expires, use the refresh token to request a new access token.

Configure API scopes

Scopes let you specify what actions your integration can perform on behalf of the end user. To grant Brand template and Autofill APIs access to your integration, set the following scope permissions under the Scopes tab:

design:content:write
design:content:read
brandtemplate:content:read
brandtemplate:meta:read.

Step 1. Collect and view brand templates

The example in the following steps uses JavaScript and the node command to make an API call, collect your Canva Brand Templates, and display the response returned by the Canva API in the console. The logged output can give you an idea of what parameters you can parse and display when building your integration.

To collect your Canva Brand Template and view the API response:

Create a new JavaScript file named brandTemplate.js and add the following.

   module.exports.init = function () {
       fetch("https://api.canva.com/rest/v1/brand-templates?dataset=non_empty", {
           method: "GET",
           headers: {
              "Authorization": "Bearer <Add your Access Token Here>",
           },
         })
           .then(async (response) => {
             const data = await response.json();
             console.log(data);
           })
           .catch(err => console.error(err));
       }

Use the dataset=non_empty query parameter to filter and return only Canva Brand Templates that have a dataset.

Run the following node command to make your API request.

   node -e 'require("./brandTemplate.js").init()'

The API response returns a list of available Canva Brand Templates, as well as other important response parameters, as shown in the following example.

   {
     continuation: '<token-value>',
     items: [
       {
         id: '<id-value>',
         title: 'Limited Presentation',
         view_url: 'https://www.canva.com/design/<id-value>/view',
         create_url: 'https://www.canva.com/design/<id-value>/remix',
         thumbnail: [Object],
         created_at: 1701760702,
         updated_at: 1715904777
       },

If customers have more Canva Brand Templates than the response's pagination parameters can handle, the response returns a continuation token. Use this token in your integration as a query parameter to request the next set of results.

The Brand Template API returns the Canva Brand Template ID, which you need to apply templates consistently. The next step uses this ID to retrieve the information you need about each template so you can apply it to a design.

Step 2. Collect a brand template dataset

To collect information about a specific brand template, including the dataset for applying the template to a design:

Create a new JavaScript file named getBrandTemplate.js and add the following code.

   module.exports.init = function () {
       fetch("https://api.canva.com/rest/v1/brand-templates/<add your Canva Brand Template ID here>/dataset", {
           method: "GET",
           headers: {
             "Authorization": "Bearer <Add your access token here>",
           },
         })
           .then(async (response) => {
             const data = await response.json();
             console.log(data);
           })
           .catch(err => console.error(err));
       }

Run the following node command to make the API request.

   node -e 'require("./getBrandTemplate.js").init()'

A successful response returns the requested Canva Brand Template's dataset, including the data fields you can change when creating a new design from the template.

If you receive the following error when testing your web application, check your integration has the correct permissions to access the brand template.

   {
     code: 'permission_denied',
     message: 'Not allowed to get brand template with ID <ID-value>'
   }

Step 3. Apply the brand template using the Autofill API

To apply the brand template using the Autofill API:

Create a new file called autofillBrand.js and add the following code.

   module.exports.init = function () {
       fetch("https://api.canva.com/rest/v1/autofills", {
           method: "POST",
           headers: {
             "Authorization": "Bearer <Add your Access Token Here>",
             "Content-Type": "application/json"
           },
           body: JSON.stringify({
               "brand_template_id": "<Add your Canva Brand Template ID here>",
               "title": "string",
               "data": {
                 "title": {
                   "type": "text",
                   "text": "Brand template autofill completed"
                 }
               }
             }),
         })
           .then(async (response) => {
             const data = await response.json();
             console.log(data);
           })
           .catch(err => console.error(err));
       }

This request initiates an asynchronous design autofill job based on the included Canva Brand Template data and ID. If successful, it creates a new design based on the template.

Run the following node command to send the POST request and check for a response.

   node -e 'require("./autofillBrand.js").init()'

   {
     "job": {
       "id": "<design autofill job id value>",
       "status": "in_progress"
     }
   }

A successful response means the design autofill job has started and is in progress, as indicated by the status. In the next step, use the Autofill job ID (job.id) to check on the status of the new design.

Troubleshoot the asset ID

   {
    "code": "invalid_field",
     "message": "'asset_id' must not be null."
   }

If the response returns this error, your Canva Brand Template has an image data field, so you must supply a Canva asset ID in the Autofill API body section. You can use the Assets Canva API endpoint to provide customers with the ability to upload their image assets. The Assets API can help you access and use uploaded media asset IDs when automatically filling designs from Canva Brand Templates.

Step 4. Query autofill job status

To check if a new design is successfully created from a Canva Brand Template, you can query the autofill job's status:

Create a new file named queryAutofill.js and add the following code.

   module.exports.init = function () {
       fetch("https://api.canva.com/rest/v1/autofills/<Add your autofill job id value here>", {
           method: "GET",
           headers: {
             "Authorization": "Bearer <Add your Access Token Here>",
           },
         })
           .then(async (response) => {
             const data = await response.json();
             console.log(util.inspect(data, { depth: null }));
           }) //util.inspect makes sure the console.log displays the response object in full.
           .catch(err => console.error(err));
       }

Run the following node command to query the autofill job.

   node -e 'require("./queryAutofill.js").init()'

Poll autofill job status

Polling the autofill job often, and parsing the response, provides useful information for your web app's user experience.

While the autofill job is running, the Get design autofill job API returns the following response.

{
  "job": {
    "id": "<autofill design job id>",
    "status": "in_progress"
  }
}

While the status is in_progress, you can provide customers with a loading state, then display a new message when the status changes to success. The following side-by-side example shows the queryAutofill.js response alongside a response from the same GET request directly on the Autofill API docs page.

The successful response includes a link to view the design, which is the view_url. You can display this link in your integration to show users how the design looks.

Apply Canva Brand Templates for consistent designs

Using the Autofill API in your integration helps your customers apply their Canva Brand Templates consistently. They can view exactly what aspects of a design they're able to modify, and know the design follows their branding.

Remember, you can try out the Canva APIs in the Connect API documentation anytime, and the Connect API Starter Kit is available for a complete demonstration of what you can build.

This app will win me my fantasy football league

Meredith Hassett — Fri, 18 Sep 2020 16:50:49 +0000

Or at least I hope it will :)

In Week 1 of my Fantasy Football League, I lost bad. Like 2nd lowest score in the whole league bad. Only 1 other person did worse than me. 🤣

And this got me thinking, I really need some better players (plus my defense did NOTHING). By random circumstance, I found the ESPN has an API for getting league and team information, and lightbulb, let me build a webapp that can help me win my fantasy league.

The documentation definitely needs some work as ESPN actually provides none, and a nice fellow dev Mike Kreiser was kind enough to help us out. If you want to learn more about working with the ESPN API that is available via an npm package, check out his documentation here.

Digging into the source code, you learn a little bit more about what is available from this API, and one of the endpoints is to your league's free agent list. I thought to myself, this could be helpful.

So I started playing around with the API and trying to figure out exactly how this could help me. I am not fantasy football expert, and I noticed one of the fields returned is a Percent Started. This percentage is based on how many other leagues started this player. So while I might not be the best, maybe a lot of other people playing know what they are doing. This got me thinking, I could start looking for free agents in our league with high percentages and scoop them up.

I started working an app where I can see all the available players, make sure they aren't injured or not a team (and therefore won't be scoring any points), and then use this list to make better decisions for my team.

So far, I have the table up and running, and next up is for filtering and sorting. Stay tuned for progress and to see if it did help me win 😁

Working with the Patreon API (now that we know what's going on)

Meredith Hassett — Tue, 25 Aug 2020 15:29:20 +0000

OK so now that we know what is going on with Patreon API, we're ready to start working with! I created an example site where I lead hikes and to access Hike photos, you'll need to subscribe to a Patreon reward tier. While this is just an example, I am using it to help my musical friends rebuild their teaching practice and include extra opportunities to contribute to get access to more music. Stay tuned to see the result of her site!

For now, let's build our website on Corvid by Wix so we don't have to worrying about setup and hosting for our site. I set up a basic UI to handle where we'll put our tiers of Rewards. With Corvid and Wix, we can added a repeated element (called a repeater) that has built in functionality to iterate through all items in a data list to help us customize display of the data more easily. I'll add one of those to my page as well.

Once the UI is ready to go, we need to fetch the tiers from Patreon. If we dynamically grab the data from Patreon, this reduces are maintenance costs down the line as any time we add new levels or update what a level costs or provides, we will see those updates on our site.

Using Corvid, I am going to switch over to my backend code for my website and add a new JavaScript Module. This module will be called pateron.jsw as it will house any and all interactions we need with the Patreon API. As I mentioned in my above linked blog post, the npm module may not work for you as it does have hard coded functionality inside.

In this example, we have access to the data we need via the npm helper module, so I am going to work with it.

To install an npm module with Corvid, all you need to do is use the GUI to search for and install the package.

Once we have the module installed, back in our web module code, we need to import the Patreon API from the module. Since the default export is not set for the Patreon npm module, we do need to define the export we are looking to import. So at the top of our code, let's import the patreon export from Patreon. I gave it an alias so I more clearly remember which functionality I am working with, but it's ok if you don't.

import { patreon as patreonAPI } from 'patreon'

Next I am going to create an export function as we need to be able to access this from the UI. Make sure to give it a descriptive name of the functionality it provides.

export async function getRewardTiers() {

}

Now we need to initialize a new Patreon client in this function. Since this is a static site for myself (or your client), I can use my Creator's Access Token that I get when I create a new client in the Patreon Portal. If you haven't created a client, make sure to do so now.

We can pass this Creator's Access Token to the Patreon API to create a new client. I created a constant to hold this access token value for security purposes. To use the secrets manager from Wix, check out some of my other blog posts.

const patreonAPIClient = patreonAPI(creator_access_token)

With our new client initialized, we can access our creator data using the /current_user or /current_user/campaigns endpoint. As a reminder, the /campaigns/${id} endpoint does not work with the npm modules as noted in the linked blog post at the top of this one. I am going to access the current user's campaigns as this also holds reward tier information.

patreonAPIClient('/current_user/campaigns')

The Patreon API Client is asynchronous, so we need to handle when this promise returns. We can grab the store object when the promise returns.

patreonAPIClient('/current_user/campaigns')
    .then(({ store }) => {
    })

This store object contains 3 things: user, campaigns, and rewards. I am only interested in the Rewards for this example, so I am going to parse out the rewards.

const rewards = store.findAll('reward').map(reward => reward.serialize()

However, beyond just wanting all the rewards, I only want rewards clients can contribute to, so I want to filter out those with a URL value set. To do this, we have to traverse the object structure to get to the Attributes of a reward, which is where the url property, if set, lives. Once we are in the attributes object, we want to filter on if url is not null. Additionally, we really only need the attributes object of a reward to get all relevant info, so I am only going to return the attributes object for each reward.

let rewards = store.findAll('reward').map(reward => reward.serialize().data.attributes).filter(reward => reward.url)

Once we have the reward's attributes object as an array of rewards, we have one last step before we can return this array. Repeaters in Corvid take an array of objects that contain an "_id" property with a value of string. So we need to append this ID to each of our objects. Let's loop through each object in the array of rewards and add the "_id" property.

for(let i = 0; i < rewards.length; i++){
    rewards[i]._id = `00${i}`
}

Now our array of Rewards objects is ready to be returned from our promise. Make sure to return rewards.

return rewards

And lastly, make sure this function that we just built has a return to make sure the rewards data reaches the calling code.

export async function getRewardTiers() {
    const patreonAPIClient = patreonAPI(access_token)
    return patreonAPIClient('/current_user/campaigns')
        .then(({ store }) => {
            let rewards = store.findAll('reward').map(reward => reward.serialize().data.attributes).filter(reward => reward.url)
            for(let i = 0; i < rewards.length; i++){
                rewards[i]._id = `00${i}`
            }
            return rewards
        })
}

Great! Now we can work with the Rewards data on our UI. Switch back to your page where you want to show the reward tiers.

The first thing we need to do on the UI code is import the backend function to get the reward data. To do this, we use the standard import notation and traverse to our backend code files.

import { getRewardTiers } from 'backend/patreon.jsw'

Now we can work with the exported getRewardTiers function. In our page's onReady function, define a new variable that we can use to set and update the page's data.

let data

Next, call our getRewardTiers function, and in the promise return, set the response to the data variable.

getRewardTiers().then((result) => {
    data = result
}

Corvid exposes APIs to work with different Wix components, like the repeater we have the page. Looking at the Wix Repeater API, we see that we can use the data property to get and set values for the repeater. We can then go ahead and set the value of our data variable to the data property of the repeater.

$w('#patreonRepeater').data = data

Once the data is set, we can iterate through each item in the repeater using the Repeater API's forEachItem function. This will enable use to iterate through not only the data bound to each item in the repeater, but also access each UI element in the repeater for a specific item. This lets us update the context of only the selected data element in an array of data and UI elements, instead of updating the global UI element. In the function callback handler, we pass in the parameters $item and itemData. These allow us to work with only the select UI element for that object in the array and the specific data for that index in the object array. Instead of having to access everything at index i, we can access it it with $item or itemData.

$w('#patreonRepeater').forEachItem(($item, itemData) =>{
    $item('#rewardTitle').text = itemData.title
    $item('#rewardDescription').text = "To receive this reward, the monthly pledge is $"+ itemData.patron_amount_cents/100
    $item('#rewardLink').link = "https://www.patreon.com"+itemData.url
})

When we preview our page (aka go to QA), we can see a list of Patreon Reward tiers for our site. When we click the link, we'll automatically be taken to the pledge page for the tier where the user can enter their credit card information and start their pledge.

This is a great opportunity for creators to create a centralized landing page where all of their support levels are available to any and all of their clients!

Demystifying the Patreon API

Meredith Hassett — Fri, 21 Aug 2020 10:26:25 +0000

The origin story of this blog post is that I was helping my friend who works as a music teacher and performer bring her offerings online, and I thought it would be helpful to include links to her Patreon Reward tiers to make it easier for her clients to contribute to her music. However, as I began to dig in and try to unravel the mystery that is the Patreon API, I found some myself running into many 404 errors using the npm helper package and constantly banging my head against a wall of "do I really not know how to read these API docs?!?!?!".

So here's what I was trying to accomplish:
All I wanted was the campaign tiers exposed on her Patreon page. I already set up a client in the Patreon Portal, grabbed the create access token (so I could skip OAuth, my nemisis), and grabbed the current user campaigns using the npm helper.

    const patreonAPIClient = patreonAPI(access_token)
    patreonAPIClient('/current_user/campaigns')

Now that I had the campaign ID of the only campaign she had, I could hardcode that in (as she isn't planning on hosting another) and use that to retrieve campaign specific information. So according to the docs, you look at the campaign endpoint and pass in the ID:

    const patreonAPIClient = patreonAPI(access_token)
    patreonAPIClient('/campaigns/${id}')

And this will give you the campaign info. However it returns a 404 and I really started questioning my ability to work with and understand the API Documentation.

Well after some digging, turns out I am not crazy and there is an issue in how the helper package API url is constructed. I plunged into their github src code and found that AHA the npm package exports the base path as "api/oauth2/api", but the campaign endpoint does not live there. If you look at the API Docs for Campaigns, you'll see that the base path should be "api/oauth2/v2" So if you try to access "/campaigns/${id}", you get a 404 with this npm package because "api/oauth2/api/campaigns" does not exist.

For now, it seems that the best work around would be to use a fetch or other http request instead. It appears the V1 of campaigns is also working, so here are the 2 ways I found to access a specific campaign:

via the v2 https://www.patreon.com/api/oauth2/v2/campaigns/5136507

via the v1 https://www.patreon.com/api/campaigns/5136507

The key difference I have found between these 2 is that v2 includes no fields by default and requires Authorization, and v1 includes all fields and relationships without need to authorize.

As a note, Patreon's API docs do mention that they are not actively maintaining the API due to resource constraints.

Why are we still using iFrames?

Meredith Hassett — Mon, 10 Aug 2020 10:29:22 +0000

A few months ago, I took over the Corvid by Wix StackOverflow tag to help answer questions about Corvid (formerly Wix Code). One of the common themes I saw popping up was people loveee using iFrames on their Wix sites. And for a second I thought maybe 2020 is all a dream and I'm actually back in 2008. But then I pinch myself, and it hurts so I'm awake and it really is 2020.

To figure out why people are still using iFrames, I went to the one place I find all my information...Google Search. The main themes I found there were people are using iFrames to:

not have to deal with CORS and giving 3rd party sites/services unrestricted access
it's easier to pull UI elements across with iFrames
Advertising and Marketing
maybe the 3rd party you are working with doesn't provide an alternate solution

But using iFrames does cause problems for developers. iFrames are one way, so there is no way to get responses from any embedded forms. This makes it harder for the ever-growing-in-popularity event driven programming. Additionally when we all have 3 different screen sizes in our pockets/bags/homes, iFrames aren't inherently responsive and can break the user experience on a mobile site. And from an SEO perspective, they may not help you as the content cannot always be indexed.

So in today's modern world of REST APIs and GraphQL, why are you still using iFrames? I am hoping to start a series exploring this topic, so please share you positive or negative iFrame experiences in the comments!

Using Twilio for User Verification on your website

Meredith Hassett — Wed, 05 Aug 2020 15:57:13 +0000

While I love Twilio for sending text messages as much as the next person, I haven't spent much time digging into the rest of their offerings. And there is so much to explore! Today, I want to look at how to use the Verify API from Twilio to require that a user verifies themselves before moving forward in a process. This can used for 2FA on accounts or verifying purchases from anonymous users.

A breakdown of how this will all work:

we need to capture the user's phone number
start a verification process with Twilio
have the user enter their code
retrieve that code and pass it to Twilio's verification check service
get the green light and go!

So we need at least 2 UI inputs and 3 calls to Twilio. WAIITT...where did 3 come from, you only outlined 2. Well to make sure a phone number is in the proper format, instead of doing the regex verification on our side, Twilio has a service we can use for that too!

The first thing that you will need is an input field with the phone number. This can be on your sign-up screen, payment details, account settings page, wherever makes sense for your app. Since I'll be using Corvid by Wix, I am just going to drag and drop a Text Input UI element onto my page and give it an ID of "phoneInput". You may also want a button to trigger the Verification process, so feel free to add a button with id "verifyButton".

Once we have our UI elements on our page, we need to add an event to the button click to retrieve the value of the phone number and pass it along to the Twilio Verify service. I am going to do the verification process in the backend of my app so I'll start by importing my backend function from my Twilio file.

import { sendVerification } from 'backend/twilio'

Next, in my page onReady event, I will add a new event listener for my button.

$w('#verifyButton').onClick(async () => {
})

In my event listener, I will GET the value of the phone number input and assign it to a new variable.

$w('#verifyButton').onClick(async () => {
    let userPhone = $w('phoneInput').value
})

And lastly (for now), we'll pass this phone number as a parameter to our backend verification function.

$w('#verifyButton').onClick(async () => {
    let userPhone = $w('phoneInput').value
    sendVerification(userPhone)
})

Now we actually need to implement this backend function, so switch over to your backend code. In Corvid, we can accomplish this by going in our file structure to our Backend folder, and either add a new file or work with an existing one. Since we're still working with the Twilio npm module, I will add these functions to my existing twilio.jsw file.

Let's stub out the new sendVerification function. We need it to accept 1 parameter for the user entered phone number.

export async function sendVerification(phoneNumber) {
}

When using functions beyond the file they live in, make sure to export them so other code files can import their functionality.

Inside this verification function, we need to instantiate a new Twilio client, so we'll need our Account SID and Auth Token like we did for sending a text message. If you don't remember how we set this up, take a look at this blog post on working with Twilio and Corvid.

export async function sendVerification(phoneNumber) {
    const authToken = await wixSecretsBackend.getSecret("twilio_auth_token")
    const accountSid = await wixSecretsBackend.getSecret("twilio_account_sid")

    let twilioClient = new twilio(accountSid, authToken)
}

For the Twilio Verify API, we all need to create a new service. I did so via my Twilio account, but you can also use the API to create a new service. Once you create the service, take note of its ID as we will need it throughout the application. Since I created my service via my account GUI, I added it in the secrets manager for my application.

const verifyId = await wixSecretsBackend.getSecret("twilio_verify_id")

Now we have everything we need to start a verification process!

The Verification API is picky about the phone number format, so we can use Twilio's Lookup API to find the proper phone number format every time no matter how the user enters it. Let's start with looking up the phone number. We'll pass in the user entered phone number to the phoneNumbers lookup function.

twilioClient.lookups.phoneNumbers(phoneNumber).fetch()

Once this promise resolves, we'll have the number in the proper format we need via the returned object. On the promise resolve success, let's move forward with the Verify API's Verification Service. We need to use the service we created, so this is where you need the Service ID. From the services, we want to use the Verification service and create a new verification. A verficaition service needs 2 inputs via a JSON object: the phone number to send the code to and which channel to use (ie Call or SMS). I am going to set it to SMS.

twilioClient.verify.services(verifyId).verifications.create({ to: <returnedPhoneNumber>, channel: 'sms' }))

Now we know we need to chain this together as we need the number from the lookup API to run the verification endpoint, so all linked up, it would look something like this:

twilioClient.lookups.phoneNumbers(phoneNumber).fetch()
        .then(phone_number => twilioClient.verify.services(verifyId).verifications.create({ to: phone_number.phoneNumber, channel: 'sms' }))

The last thing we want to do is make sure to return the results so our calling code knows what to do next. For example, in our UI if we get a positive response from the verification service, we want to open up a new Input field for the user to enter their code But if the response was negative, maybe we need the user to reenter the phone number or wait for the service to come back online. So to finish up our backend code, make sure to return the result from your Verify API call via another chained then() and finally return the whole result to the calling function.

return twilioClient.lookups.phoneNumbers(phoneNumber).fetch()
        .then(phone_number => twilioClient.verify.services(verifyId).verifications.create({ to: phone_number.phoneNumber, channel: 'sms' }))
        .then(verfication => verfication)

Sweet! Now we need to do something with this verification result on our UI, so jump back to your frontend where you have the user input their phone number.

For me, I am going to use a lightbox to collect the user's code they received on their mobile device. I have created a lightbox called "Verify". You can show a new input field on the same screen or also use a lightbox. Whatever fits your need!

When sendVerification() returns, I want to check the result and determine if I should open the lightbox. I'll use an if() statement to look at the result object's status.

sendVerification(userPhone).then((result) => {
    if (result.status === 'pending') {
    }
})

If the code was successfully sent, we'll see a status of "Pending". When we see that status, I am going to open my lightbox using the Wix Window API. Additionally, I'll need to phone number of the user again to check to make sure they are using the correct code sent to that number, so I'll also make a data object to send along to the lightbox.

if (result) {
    let userData = {
        "number": userPhone
    }
    wixWindow.openLightbox("Verify", userData)
}

In the lightbox, I can retrieve my passed in data by retrieving the context of the lightbox also via the Wix Window API. Make sure to import this API on all pages and lightboxes that are using it!

const context = wixWindow.lightbox.getContext()

This lightbox contains my next Text Input field called "codeInput" that is where the user should enter their code they received on their mobile device. I also have a button called "verifyButton" to kick off the Verification Check process. This process will also being running in my Twilio backend folder, so make sure to import you Verification Check process function at the top of your code.

import { verifyUser } from 'backend/twilio'

When my Verify button is clicked, I want to start my verifyUser() function, which will take in the user's phone number and the entered code. Let's attach an onClick() event to the button.

$w('#verifyButton').onClick((event) => {
})

In this onClick event, call the verifyUser() function, and pass in the phone number and code to verify.

$w('#verifyButton').onClick((event) => {
    let code = $w('#codeInput').value
    verifyUser(context.number, code)
})

And now we need to build out the verifyUser() function in our Twilio backend code! Switch over to your Twilio backend code file.

Here's let stub out this new function.

export async function verifyUser(number, userEnteredCode) {
}

We need a Twilio Client again, plus the Service ID from the service we created earlier. Grab these values from your Secrets Manager, or wherever else you stored them. Then initialize your Twilio Client.

export async function verifyUser(number, userEnteredCode) {
    const authToken = await wixSecretsBackend.getSecret("twilio_auth_token")
    const accountSid = await wixSecretsBackend.getSecret("twilio_account_sid")
    const verifyId = await wixSecretsBackend.getSecret("twilio_verify_id")

    let twilioClient = new twilio(accountSid, authToken)
}

We also need to make sure the user's phone number is properly formatted again, so use the Twilio Client and the Lookups API we used earlier to set this up.

twilioClient.lookups.phoneNumbers(number).fetch()

If you wanted to avoid making this call again, you can also retrieve the to property from the return verification object from above and use that as the user phone data object to keep the properly formatted number.

Once we have our phone number ready to go, we can access the Twilio Verify API again and this time use the Verification Checks service. This service takes in the phone number and code and makes sure it matches what Twilio recorded sending.

twilioClient.verify.services(verifyId)
    .verificationChecks
    .create({ to: <userEnteredPhoneNumber>, code: userEnteredCode })

If you are using the Lookups API, you will need to chain your promises to look something like this:

twilioClient.lookups.phoneNumbers(number).fetch()
    .then((phone_number) => {
        return twilioClient.verify.services(verifyId)
            .verificationChecks
            .create({ to: phone_number.phoneNumber, code: userEnteredCode })
    })

And lastly, we need to make sure to return the result to the calling function. If the result does not say approved, the user may need to reenter the code or get a new code as it expires after 10 minutes.

return twilioClient.lookups.phoneNumbers(number).fetch()
    .then((phone_number) => {
        return twilioClient.verify.services(verifyId)
            .verificationChecks
            .create({ to: phone_number.phoneNumber, code: userEnteredCode })
    }).then((result) => {
        if (result.status === 'approved') {
            return "verified"
        } else {
            return "NOPE"
        }
    })

And back on the UI, we can add in some additional error handling based on the result.

verifyUser(context.number, code).then((result) => {
    if(result === 'verified'){
        wixWindow.lightbox.close({"status":"success"})
    } else {
        $w('#errorText').text = "Code No Bueno :( Try Again"
        $w('#errorText').show()
   }
})

TADA! Verification Complete!

This is just a sample of what you can do with the Twilio Verify API and just one way of flowing it into your application. Feel free to play around with this to fit your applications needs, but alway remember with the Twilio Verify API you need to do these steps in order:

Create a Twilio Service
Create a new Verification
Check the Verification with the same information as you created it with

Enjoy!

Exposing HTTP functions with Corvid

Meredith Hassett — Thu, 30 Jul 2020 15:26:13 +0000

Creating and exposing HTTP functions from your site doesn't have to be a long and tedious process. Sometimes you may need to share access to your data or functionality from your site. Let's take a look at an easy (and FREE!) way to expose some site data!

Using Corvid, we can easily expose an HTTP function version of our site data or site functionality. I am working on building a Kickstarter style site, so I am going to work on building a function that GETs the current total value of pledges on the product. The site only has one product, so this makes it easier :)

The first thing we need to do is create a new file on the backend of our application called https-functions.js. This is where we'll create and our expose our site's data.

We'll need the Wix HTTP Functions API as it will help us do the hefty lifting of our HTTP functions. Go ahead and import any methods you'll need from the wix-http-functions API at the top of your http-functions.js file. I'll be focusing on the happy path and only using the OK method. If you need other methods or are looking for error handling, check out the Wix HTTP Functions API Docs.

import {ok} from 'wix-http-functions';

While we're importing, let's also grab the Wix Data API so we can query our Data Collections (aka our database).

import wixData from 'wix-data';

When defining our function name for our HTTP function, we have to be careful about our naming our function. The function name starts out with the verb we are looking to associate with the function. So in this case, the function name will start with get. The next part of the function name is what it will do and how it will be called, so be sure to make it descriptive. Since we're looking at getting the total pledge amount, I'm going to name it totalPledges. That looks like this:

export function get_totalPledges() {
}

Don't forget it needs to be exported so it's available outside of this file!

We need to set up a basic Options object to include the data we need to pass back via the HTTP function return. The only property we need to setup now in the JSON object is the header's content-type and set it to "application/json".

let options = {
        "headers": {
            "Content-Type": "application/json"
        }
    };

Now we need to retrieve the data to share when our new function is called. We can do this using Wix Data. Wix Data allows us to aggregate on a field name (aka column) from our database. We'll need to create an aggregate on Table Name and then run the sum method on the field we want to aggregate. We'll then run this aggregate query. This is a promised method, so we'll handle the Promise return next.

wixData.aggregate("TableName")
    .sum("fieldName")
    .run()

On the return of this promise, let's check to make sure there is data in the result object and then return the result of the query as the content body for the HTTP function result which will live in the options object as the body property. The query result can be found using results.item.

.then((results) => {
            if (results.items.length > 0) {
                options.body = {
                    "total": results.items
                };
            }
        });

The last think to do is return the OK method with the Options data object we've constructed. Inside the if() statement, add the return of OK.

return ok(options);

To test out if our new HTTP function works, make sure to SAVE AND PUBLISH and then we can use a tool like Postman to call the API. In order to access your function, you'll need to construct the URL for the REST API call. It would be your Wix Site name, the site's name, _functions, and then the function name without the verb.

https://mysite.wixsite.com/sitename/_functions/functionName

https://meredith.wixsite.com/demo/_functions/totalPledges

Make sure to set the proper verb in a tool like Postman or your cUrl request.

And it's that easy it is to create and expose HTTP function!

Keep checking back for more tips and tricks on working with Corvid!

Using Twilio & Corvid: Simple SMS integration for your web app

Meredith Hassett — Fri, 17 Jul 2020 23:19:36 +0000

Text messaging is the latest trend in e-commerce sites. It enables you to directly talk with your consumer and share new products or shipping updates. Twilio is a great tool that enables us as developers to add text messaging to our apps with minimal headaches. At Corvid by Wix, we're all about increasing dev velocity, so with Twilio's npm module, we can add text messaging to our website in less than 10 minutes. Don't believe me? Let's take a look.

The first thing you need to do is sign up for a Twilio trial account. This is free, and it will provide you with 3 crucial details: your account SID, your auth token, and your Twilio phone number. While you are there, it's a good idea to also add your personal phone number as a verified number as free trial accounts can only send to numbers on Twilio's verified list.

Now let's open up Corvid by Wix. If you don't already have a Wix site, it's easy to get started. All you need to do is sign up for a free Wix account, create a site from a template (or blank if you prefer!), and enable Corvid. To enable Corvid, in your Wix Editor, select Dev Mode from the top menu bar and Turn on Dev Mode.

Add a button to your site from the (+) icon. This button will be how be initialize the Twilio text message. Add an onClick event to this button through the properties panel. When you click on an UI Element on the page, the properties pane loads with that elements details. Go to the Events section, click the (+) next to onClick, and then hit Enter. You'll see a new stubbed out onClick event listener in your code editor.

Inside the new onClick event listener, let's add a new function call to sendSMS().

export function smsButton_click(event) {
    sendSms(); 
}

Now the sendSms() function has to come from somewhere, so let's have it come from the backend code so no one can get access to our secrets. To do this in Corvid, all you have to do is import the function from the backend code at the top of the UI code editor like so:

import {sendSms} from 'backend/twilio';

Of course this means we have to have a twilio.jsw file in our backend code files, so let's create one now. If you do to the Backend section in the Site Structure pane, you can add a new JavaScript Module named twilio.jsw.

In your new twilio file, we need to create an exported function so it is available to be imported by the UI (or any other code that wants to use it). To do so, stub out the new sendSms() function.

export async function sendSms() {
}

This is where we will do our Twilio call. To do that, we do need to import the Twilio npm helper package. Under node_modules in the site structure, add a new module and search for twilio. Install the Twilio package. Using Corvid to handle your npm packages means we automatically create and maintain your package.json file for you so your maintenance responsibilities are reduced.

To use the Twilio helper package, you'll need to import it in your backend code. Make sure you are working in your twilio.jsw file, and import twilio in the top of your code.

import twilio from 'twilio';

The next thing we need to do is instantiate a new Twilio client. You need to pass it 2 parameters: your Twilio Account SID and your Twilio Auth Token. You can create new constants for these values:

const accountSid = '<your value>';
const authToken = '<your value>';

Now create a new instance of Twilio and pass it these values.

let twilioClient = new twilio(accountSid, authToken);

Awesome! Now we can start working with Twilio. Today, we're just interested in sending a message, so let's use the Twilio SMS Message Create method. Let's create a new message which takes in a JSON object with 3 parameters: to, from, and body.

twilioClient.messages.create({
    to: '',
    from: '',
    body: ''
});

We need to fill in those details. TO will be your personal number. Again make sure it is verified with Twilio if you are working with their free trial. FROM will be your new active number on Twilio. When you created an account, you should have create a phone number that sends messages on behalf of your account. This will always be your from number when using Twilio. And last is your BODY. This can be whatever message you want to send. Maybe today it is just Hello World. So all filled out, it may look something like this:

twilioClient.messages.create({
    to: '+14155551234',
    from: '+16505550987,
    body: 'HELLO WORLD! I'm texting your from my Corvid site!'
});

Lastly, we need to send this to production which is super easy with Corvid. Click on Publish in the top right corner, and ta-da! Your site is in production. Click on your SMS button and check to make sure you get a text message. If you prefer to do your testing in QA, you can always use the Preview button instead of Publish.

And that's how simple it is to work with npm modules in your Corvid site! If you want to see other ways to speed up your web dev, feel free to reach out!

Coronavirus & U: How to move your in-person business online

Meredith Hassett — Fri, 20 Mar 2020 00:16:28 +0000

This novel Coronavirus is rapidly changing how we do business on a daily basis. Everyday we wake up something new has changed. Conversations with friends reveal that companies are making the move to remote permanent. Any many others believe this will completely change the future of work. And this got me thinking: how do all the changes affect my friends who run in-person business? And how can I step up and help them during this time?

I reached out to some freelance friends, and we started discussing how this rapidly changing work environment has affected them. Many have had clients cancel or their programs have been shut down completely. Some have taken drastic measures to try to make sure they can keep their businesses alive by moving their in-person lessons to virtual. But this adds additional work to their plates. When running their business as a freelancer, they were just the teacher. Now having to orchestrate multiple parent's schedules with both parents and students at home, finding tools that work the best, and reinventing their programs online.

The burden of moving whole programs online has shutter the doors to some of their schools due to additional logistics of online scheduling, payments, and tools. But this is where I hope to come in! As a Developer Advocate for Corvid by Wix, I am going to explore how to help build a killer online presence so you don't have to shutter your doors if you need to move you business to the digital realm.

Wix has built in bookings and payments systems, but with the support of Corvid, we can integrate with 3rd Parties likes Zoom, Patreon, or Google Calendar which many of my freelancing friends are using for online classes, arts supports, and scheduling respectively. So stay tuned as we dig into these integrations and explore how it helps the freelance community in this increasingly digital age!

If you have a similar story, I am would love to hear it and can help you set up a site and a coupon for a free year in exchange for your interview time!