Algolia Custom function

The Algolia Dynamic Carousels function allows you to generate carousels dynamically based on your dataset. Algolia is Symentic Search engine, which means it uses the same technology as current LLMs (vectorization) to find relationships between a search query, and data in the database.

Guide:

For example, if the user wants to search "Sports Watch", Algolia will find items in the dataset that relate to the text "Sports Watch" and thus return a set of results related to it. The function then uses this data to dynamically render carousels on Voiceflow.

This can be done with any data set, from e-commerce to movies, the possibilities are endless. Follow the step-by-step guide below to understand more about how to set this up.

Understanding Keys

In the custom function, there are multiple 'key' input variables. These "keys" represent the key used in your Algolia dataset. Lets look at an example.

Here I have an item from the e-commerce example dataset we used in the step-by-step guide below. The left side (in bold text) are the keys for my dataset.

In our custom function, we have an "imageKey" input variable. This input variable will be used as the image field for the cards in the carousel. In our Algolia dataset, we have the "image" key that has our URL to the image.

So in this case, we would want the "imageKey" variable to be "image"

The same goes for the "buttonKey" field. The button will use a URL action to open a new URL. In our Algolia dataset we have a "url" key which represents the page where the e-commerce item is hosted.

So in the case of the "buttonKey" in our function, we want to set that to "url"

Repeat this for all the keys in the function.

Input Variables

Button Label - This will be the text used for the button below the Carousel. You can type "none" if you dont want to have a button

Button Key - This will be used to map the key from your Algolia database, to the button URL action on the carousel. So if your Algolia database has a key-value pair called "url", you would want to type "url" here.

Description Key - The key in your Algolia dataset which represents the description on the card in the carousel

Title Key - The key in your Algolia dataset which represents the title on the card in the carousel (i.e the name of the product, or title of the movie)

Image Key - The key in your Algolia dataset which represents the URL to the image which will be displayed on the card in the carousel

License - The license found on the FlowBridge custom functions page

Api Key - The Search API key for your Algolia database (View step-by-step guide on where to find this)

Index Name - The name you gave your Algolia index

Application ID - The ID for your application on Algolia

Search Query - The search query you want to use for searching the Algolia Database. To optmize this, you can create a "Set AI" step on Voiceflow to extract the search term from the user's last utterance, and prompt the AI to convert the entire message to an optmized search term.

Step-by-step guide

  1. Navigate to your FlowBridge admin panel

  2. Click "Custom Functions"

  1. Click "Download"

  1. Go to your Voiceflow Project

  2. Click this icon.

  1. Click "Functions"

  1. Click this icon to import a custom function

  1. Click "Browse"

  1. Click "Import"

  1. Click "Workflows"

  1. Double-click "Home"

  1. Click here and drag a line to somewhere

  1. Click "Capture"

  1. Click here and drag a line to somewhere

  1. Click "Function"

  1. Click "Select existing function"

  1. Click "Dynamic Carousel Algolia"

  1. Go to algolia.com

  2. Click "Dashboard" if you are already logged in. Otherwise login or create an account

  1. Click this drop down on the top of your screen

  1. Click "Create Application"

  1. Click the "I accept Algolia's Terms of Service, Build Plan Terms and Service Limits, and have read Algolia's Privacy Policy" field.

  1. Click "Create Application"

  1. Click here.

  1. Type "flowbridge_dynamic_carousel" or whatever you want to name this index

  2. Click "Create index"

  1. Click "Select sample dataset" if you want to populate the database with sample data. This is what we will be using for the purposes of this guide.

In a production environment, you will want to upload your own records. For more information, you can view the Algolia documentation.

  1. Click "E-commerce" for the purposes of this guide

  1. Click here.

  1. Type "flowbridge_dynamic_carousel" or whatever you ended up naming your index on Algolia

  2. Go back to Algolia and click the gear icon.

  1. Click "API Keys"

  1. Click this icon to copy the Application ID.

  1. Back in your voiceflow build, click here and paste in the application ID

  1. Back in Algolia, click this icon to copy the search API token.

  1. Go back to voiceflow and paste the search API token here.

  1. Click here.

  1. Type "{las"

  2. Click here.

  1. In the License variable, go to the FlowBridge custom function page, copy your license key and paste it here

  1. Click here.

  1. Type "Go to Site" or any other label. This is what will be displayed on the button under the carousel.

  2. Back in Algolia, click here.

  1. Click the "Show more attributes" on any of the items listed

  1. Step

  2. For the purposes of thise guide, we will be using the "image" key to represent the card image.

  1. Click here and type in "image". This means that the "image" key in Algolia, will be mapped to the "imageKey" variable in the function. This is then going to be used as the image on the card.

  1. You know want to do the same for the remaining Keys. Within the e-commerce example dataset, the "name" field needs to be mapped to the "title" field of the card in the carousel.

So here we type "name"

  1. Click here.

  1. Type "shortDescription"

  2. Click here.

  1. Type "url"

PreviousDynaimc Buttons FunctionNextVoiceflow based Notifications on business communication apps

Last updated