Embedding a Zapier Chatbot in a Softr.io page in custom code and pass in user information

Need help please!

Zapier has embeddable chatbots as shown here: How to create a custom AI chatbot with Zapier Chatbots

I want to embed one and have it know the user’s email and name

Zapier chatbot help tells me this:

:robot: 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! :rocket:

I asked for more details:

:star2: Sure thing! Let’s dive a bit deeper into how you can use parameters to customize chatbot interactions:

Customizing Chatbot Responses

  1. 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.
  1. 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. :rainbow:

If you have any more questions or need further clarification, feel free to ask!


Currently investigating this approach:

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>

It was a pleasure assisting you @alanwunsche ! and glad you liked the workaround!

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.

Best,

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.

in order to wait and act on detail record data one can use the following code snippet

<script>
    window.addEventListener('get-record-DETAIL-BLOCKID]', (e) => {
        console.log(e.detail);
    });
</script>

DETAIL-BLOCKID needs to be replaced with the block id from studio block settings

A huge THANK YOU !!! to @Andranik who created the pattern we needed the information transfer to the Zapier chatbot

1 Like

an additional question about doing this with the new beta blocks. Do they have a different formation than 'window.addEventListener(‘get-record-DETAIL-BLOCKID’)?

Was this code added to the code component on the page or the full page?

A “custom code” block

1 Like

Thank you @alanwunsche

1 Like