Back to Blog

How to create a Dynamic URL

If you’re planning to use a chatbot to refer to different pages on your website this might be a useful article. One essential part is that your website is well structured.

Let’s take our website https://flow.ai/ as an example. If your interested in the features, solutions, pricing or documentation you will find more info at respectively:

  1. https://flow.ai/features
  2. https://flow.ai/solutions
  3. https://flow.ai/pricing
  4. https://flow.ai/docs/

When having a lot of URL’s for different products or features it will save you lots of manual work if you build URL’s in a dynamic way. To do that within your chatbot you can use the following three steps

Create an entity list

First we need to create an Entity List. Select Entity types from the menu and create a new list. you can add synonyms and an id as well. Make sure the keyword matches with the your target link. In our example this would be features, solutions, pricing or docs.

image

Create a flow and capture the entity

After creating the entity list, it’s time to create a flow and start with a text trigger. Select the entities and mark them as parameter of the entity list that you’ve just created. In this example we make the parameter “required and must be a valid entry”.

image

The image below shows you that the parameter should be valid, thus part of our entity list.

image

Use actions to create a dynamic url

Your entity list is set, your flow is ready, now let’s add some code so we can build a dynamic URL. As rich UI elements such as card and carousels enhance the customer journey we will create a dynamic url within a card.

Let’s start with two variables. The variable “page” contains the valid value of the captured entity and the variable URL contains the URL that we will be referring to.

async payload => {
  
  const page = payload.params.pages[payload.params.pages.length - 1].value
  const URL = `https://flow.ai/${page}`
}

Almost there, let’s check if actually have a value and if we have one, we’ll create a button and add it to a card to enhance UX.

if(Array.isArray(payload.params.pages)) {

  // Create a Button
  const button = new Button({
  type: 'url',
  label: `More about ${page}`,
  value: URL
  })

  // Create a card
  const card = new Card({
  title: "Flow.ai Navigation bot",
  subtitle: ""
  })
  .addButton(button)
  
  // Create a message with fallback speech
  const message = new Message('More info at Flow.ai')
  message.addResponse(card)
  return message
  }

And we’re done!

image

Find the complete code below:

async payload => {
  
  const page = payload.params.pages[payload.params.pages.length - 1].value
  const URL = `https://flow.ai/${page}`

if(Array.isArray(payload.params.pages)) {

  // Create a Button
  const button = new Button({
  type: 'url',
  label: `More about ${page}`,
  value: URL
  })

  // Create a card
  const card = new Card({
  title: "Flow.ai Navigation bot",
  subtitle: ""
  })
  .addButton(button)
  
  // Create a message with fallback speech
  const message = new Message('More info at Flow.ai')
  message.addResponse(card)
  return message
  }
}
Start for freeContact us