Conversation Data
Use the Conversation Data to display all the data collected during a conversation easily.
Overview
The Conversation Data is an embeddable UI component for displaying a view of all the data collected during a conversation.
Features include :
- Customizable : Colors, Padding, Margin pimp your component to fit into your product.
- index.html
- reecall.js
- back.js
Create a static file or include it directly in your application
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Reecall - Conversation Data</title>
<script src="https://js.reecall.com/v1/elements.js"></script>
<script src="/reecall.js" defer></script>
</head>
<body>
<main>
<h1>Conversation Data</h1>
<p> Include a conversation data card directly in your product view ! </p>
<div id="conversation-data">
<!-- Reecall will create the conversation card here -->
</div>
</main>
</body>
</html>
document.addEventListener('DOMContentLoaded', async () => {
const request = await fetch(`${YOUR_BACK_END_URL}/conversation/${conversationId}`); // you can fetch the conversation using our api
const conversationData = await request.json();
const reecall = Reecall({url:`${baseUrl}/conversation`,userId:""});
const rcui = reecall.elements();
const config = {};
const rcConversationData = rcui.create('conversationTranscription',config, conversationData);
rcConversationData.mount("#conversation-transcription");
})
This is an example of a back service to get the information threw our APIs.
const reecall = require('reecall');
const express = require('express');
const app = express();
app.get('/conversation/:id', async (req, res) => {
const userId = req.header('')
const conversation = await reecall.getConversationById(req.param.id);
res.json(conversion)
});
app.listen(3000, () => {
console.log('Running on port 3000');
});
Attributes
{
conversationId:"string",
options:{
display:"string"
},
mapping:{
collectedType:{
date:{
icon:"calendar",
valuePath:"value.date"
}
},
collectedKeys:{
meeting:{
label:"Meeting date"
}
}
},
appearance:{
width:"",
border:boolean,
borderColor:"",
borderRadius:"",
backgroundColor:"",
padding:{
top:"0px",
left:"0px",
right:"0px",
bottom:"0px"
},
margin:{
top:"0px",
left:"0px",
right:"0px",
bottom:"0px"
}
}