Table of Contents

Create a Chat Transcript Variable with Pipedream (web bots)

Abby Updated by Abby

In order to create a chat transcript we'll use MessageHooks and Pipedream

We'll catch each event, send it to a Landbot transcript variable via API and at the end we'll sort the messages based on their timestamps, we'll then have access to a Landbot variable that contains the chat transcript, which we can send to the users, or ourselves

Here's an example of what it will look like:

Builder

Here's an example of what our flow will look like, if you have an existing flow you won't need to change it, you'll just need to add a couple of blocks

Set Variables

After the welcome message, we'll need two set variables these will store our transcript events

Both of these need to be saved as strings, the first will store the events from the bot, it should be called chat_transcript_bot, the second will save the events from the user, it will be called chat_transcript_user

It's important that we use these names, as we will reference them later with code

The first Set Variable block should include our welcome, or introductory message

[{'Timestamp': '000', 'Author': 'Landbot's Bot', 'Message': 'first message'}]

You should replace first message with your message text, and Landbot's bot should be replaced by the name of your bot (which will appear in the transcript as the Author)

the second Set Variable block should contain the following: []

The rest of the flow will continue as normal, until after your last message

Pause

After our last message, we will need a delay of at least 6 seconds (if you're sending the transcript via email the user will never know!)

There are a couple of different ways to delay our bot, we can use Typing emulation or create a delay with a webhook

Code Set

After our last message we'll add a Code Set block, it will contain the following code:

let arr1 = @chat_transcript_bot
let arr2 = @chat_transcript_user
let a = arr1.concat(arr2);

function createChatTranscript(transcript) {
  for (const ele in a){
    if (a[ele]["Author"].includes("Visitor")){
        a[ele]["Author"] = "@name"
    }
}
  let orderedTranscript = transcript.sort((a, b) => a.Timestamp - b.Timestamp);
  let text = '';
  
  for (let message of orderedTranscript) {
    text += `<p>${message.Author}: ${message.Message}</p>`;
  }
  return text;
}

return createChatTranscript(a)

We'll save the output of the transcript in the variable @transcript_complete

Pipedream

https://pipedream.com/new?h=tch_mypfBa

Here's what our scenario in Pipedream will look like, we've created a Pipedream template for you, so you'll just need to follow the link and complete the following steps to deploy it

Trigger

The only thing we need to do here is copy the url (keep in mind that each template will have a different url)

Workflow Delay

We've added a workflow delay of one second, this allows time for the variables to set and become available to us

Python

The last block in our Pipedream scenario is the Python block, we'll need to change two things here

The first thing we'll need to change is the API key, you'll just replace XXX for your Landbot API key

The second thing we'll need to change is the name of the bot, this will show up in the chat transcript, so choose the bot name wisely! Then replace "My bot" with the name of your bot

Message Hooks

Last step! We'll go here and click on ADD NEW MESSAGE HOOK

The name will be whatever we want to call our integration, I used "chat transcript"

The INPUT URL will be the url we copied from our Pipedream scenario

The CHANNEL is the name of our bot

Let's press confirm and try it out! The events will automatically go to our Pipedream scenario where we can troubleshoot if necessary

How did we do?

How to Detect Visitors Browser

Proactive message on mobile

Contact