Blog overzicht

Hoe je een dynamische URL maakt

Als je van plan bent een chatbot te gebruiken om naar verschillende pagina’s op je website te verwijzen, kan dit een nuttig artikel zijn. Een essentieel onderdeel is dat je website goed gestructureerd is.

Laten we bijvoorbeeld naar onze website https://flow.ai/ kijken. Als je meer wil weten over de features, solutions, pricing of de documentation kan je de informatie vinden op de volgende pagina’s:

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

Als je veel URL’s hebt voor verschillende producten of functies, bespaar je veel handmatig werk als je URL’s op een dynamische manier opbouwt. Om dat binnen je chatbot te doen, kun je de volgende drie stappen gebruiken:

  1. Maak een entiteitenlijst
  2. Maak een flow en leg de entiteit vast
  3. Gebruik acties om een dynamische url te maken

Maak een entiteitenlijst

Eerst moeten we een entiteitenlijst maken. Selecteer Entity Types in het menu en maak een nieuwe lijst. Je kunt ook synoniemen en een id toevoegen. Zorg ervoor dat het trefwoord overeenkomt met de je target link. In ons voorbeeld zijn dit features, solutions, pricing of docs.

entiteitenlijst

Maak een flow en leg de entiteit vast

Nadat je de entiteitenlijst hebt gemaakt, is het tijd om een flow te maken en te beginnen met een Text Trigger. Selecteer de entiteiten en markeer ze als parameter van de entiteitenlijst die je zojuist hebt gemaakt. In dit voorbeeld maken we de parameter “required and must be a valid entry”.

entity markeren

De onderstaande afbeelding laat zien dat de parameter geldig moet zijn en dus deel uitmaakt van onze entiteitenlijst.

entity controleren

Gebruik acties om een dynamische url te maken

Je entiteitenlijst is ingesteld, je flow is klaar, laten we nu wat code toevoegen zodat we een dynamische URL kunnen bouwen. Omdat rijke UI-elementen zoals Cards en Carousels de klantervaring verbeteren, zullen we een dynamische url binnen een Card creëren.

Laten we beginnen met twee variabelen. De variabele “page” bevat de geldige waarde van de vastgelegde entiteit en de variabele URL bevat de URL waarnaar we zullen verwijzen.

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

We zijn er bijna, laten we kijken of we daadwerkelijk een waarde hebben en als we er een hebben, maken we een knop en voegen deze toe aan een kaart om UX te verbeteren.

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
  }

En we zijn klaar!

dynamische chatbot url

Vind de complete code hieronder weergegeven:

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
  }
}
Demo aanvragen