I want to embed one and have it know the user’s email and name
Zapier chatbot help tells me this:
Absolutely! Your chatbot can indeed start with pre-populated data such as a user’s username or other details when embedded on a webpage. This allows for personalized interactions right from the start.
You can use this format in your chatbot’s directive to customize responses based on the user’s information: {{params.parameter|default:“default wording”}}. This makes your chatbot smarter and more relevant to each user!
For saving information back to Airtable or another database during or after the interaction, you can integrate your chatbot with Zapier to automate these processes, ensuring a seamless flow of data.
Need more details on setting this up or anything else? Just let me know!
I asked for more details:
Sure thing! Let’s dive a bit deeper into how you can use parameters to customize chatbot interactions:
Customizing Chatbot Responses
Using Parameters:
When you embed the chatbot on a webpage, you can pass user-specific data (like username, account information, etc.) as parameters.
In the chatbot’s script, you can access these parameters to tailor the conversation. For example, if you pass a username, you can greet the user personally.
Default Values:
The default part in {{params.parameter|default:"default wording"}} is used to specify what the chatbot should say if the specific parameter isn’t available. This ensures that the chatbot always has a response ready, even if some data is missing.
Practical Example:
Script in Chatbot: “Hello {{params.username|default:“there”}}! How can we assist you today?”
Outcome:
If the username parameter is passed and contains the value “John”, the chatbot will say: “Hello John! How can we assist you today?”
If the username is not provided, the chatbot will say: “Hello there! How can we assist you today?”
This approach makes interactions feel more personal and engaging, enhancing the user experience.
If you have any more questions or need further clarification, feel free to ask!
I have tried this and the console shows the correct email, but Zapier doesn’t yet recognize the email parameter in the following embed:
<div class=“w-100 text-center”>
<p class=“h6">
<script type=‘module’ src=‘https://interfaces.zapier.com/assets/web-components/zapier-interfaces/zapier-interfaces.esm.js’></script>
<script>
function createChatbotEmbed(params) {
const chatbotEmbed = document.createElement(‘zapier-interfaces-chatbot-embed’);
chatbotEmbed.setAttribute(‘is-popup’, ‘false’);
chatbotEmbed.setAttribute(‘chatbot-id’, ‘<Redacted ID>’);
chatbotEmbed.setAttribute(‘height’, ‘600px’);
chatbotEmbed.setAttribute(‘width’, ’90%’);
if (params) {
chatbotEmbed.setAttribute(‘params’, JSON.stringify(params));
}
// Append the embed code to the DOM
document.querySelector(‘.h6’).appendChild(chatbotEmbed);
// Debugging: log the final embed element
console.log(chatbotEmbed.outerHTML);
}
// Check if the logged_in_user object exists and contains a softr_user_email property
if (window.logged_in_user && window.logged_in_user[‘softr_user_email’]) {
// Get the user’s email
const userEmail = window.logged_in_user[‘softr_user_email’];
console.log(“User email:“, userEmail); // Debugging line
// Create the chatbot embed code with parameters
createChatbotEmbed({ email: userEmail });
// createChatbotEmbed({ customParam: userEmail });
} else {
console.log(“User not logged in or email not available”); // Debugging line
createChatbotEmbed(null);
}
</script>
</p>
</div>
With help of support@softr.io, we ended up with this embed code workaround for a Zapier chatbot:
<div class="w-100 text-center">
<iframe id="zapier-iframe" height="600px" width="100%" allow="clipboard-write *" style="border: none;"></iframe>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
const iframe = document.getElementById('zapier-iframe');
const baseUrl = 'https://<redacted>.zapier.app/_z/embed/chatbot/<redacted>/<redacted>';
// Check if the logged_in_user object exists and contains a softr_user_email property
if (window.logged_in_user && window.logged_in_user['softr_user_email']) {
const userEmail = window.logged_in_user['softr_user_email'];
console.log("User email:", userEmail);
// Construct the new URL with the email parameter
const emailParamUrl = `${baseUrl}?email=${encodeURIComponent(userEmail)}`;
// Set the new src attribute for the iframe
iframe.src = emailParamUrl;
} else {
console.log("User not logged in or email not available");
// Fallback to the base URL if email is not available
iframe.src = baseUrl;
}
});
</script>
</div>
Hi @Andranik, Can you please add a comment here about how you determined the baseUrl? I have another Zapier Chatbot I want to include and I’ll reuse this custom code.
Thanks !
Hey @alanwunsche !
Sure thing, it was provided by you when you mentioned that Zapier has an Iframe version of the embed code and it was included in the Iframe.
Thank you! I was asking since you have this ‘…chatbot/redacted/redacted’ ending in the baseUrl, whereas the iframe embed codes I’m seeing in Zapier have just one ID.
@andranik , For another chatbot, I want to send another text-based parameter such as a Project ID or Project Description to the chatbot so that it can use that information too. How can I add that to the user’s email address?
And more generally, if I’m on a Project Details page, I’d like to grab from the current Project’s Airtable record and send certain fields to the Chatbot.
an additional question about doing this with the new beta blocks. Do they have a different formation than 'window.addEventListener(‘get-record-DETAIL-BLOCKID’)?
Absolutely! Your chatbot can indeed start with pre-populated data such as a user’s username or other details when embedded on a webpage. This allows for personalized interactions right from the start.
Sure thing! Let’s dive a bit deeper into how you can use parameters to customize chatbot interactions: