How to Use CallFluent: Advanced Agent Training Part 3:
-
Inbound AI Voice agent website integration
-
Outbound AI Voice agent website integration
Welcome to Part 3 of the CallFluent Advanced Training series! In this guide, you'll discover how to embed CallFluent AI agents—both outbound and inbound—directly onto your website.
By following these steps, you can create seamless customer interactions, automate lead capture, and provide instant support right from your site.
You can watch the detailed video here:
1. Introduction to CallFluent Agent Embedding
CallFluent allows you to add AI agents to your website for both outbound and inbound calls. You can choose from several form styles, such as inline widgets, pop-up widgets, and pop-up links. These forms can be customized to match your website’s look and feel.
Tip: Decide which form style best fits your website’s user experience before starting the embedding process.
2. Outbound Agent: Embedding and Customization
Choosing and Customizing Your Form
- Go to your CallFluent dashboard and preview the available form styles.
- Click the "Edit" button to open the form customization popup.
- You can change:
- The color of the call-to-action button
- The button text (e.g., “Go Now”)
- The theme (light or dark)
- The corner style (rounded or square)
- Add or remove custom fields (the only required field is the phone number)
Best Practice: Use your brand colors and language for a seamless user experience.
Copying the Embed Code
- After customizing, copy the embed code provided for your chosen form style from the CallFluent dashboard.
- The code will change depending on the style you select (inline, popup, or link).
Tip: Always copy the code after making changes to ensure you have the latest version.
3. Outbound Agent: Adding the Form to Your Website
Using a Website Builder
- Open your website builder and navigate to the section where you want the form to appear.
- Place the CallFluent embed code from your dashboard into the appropriate area (usually in the body section).
Best Practice: Test the placement on both desktop and mobile views to ensure it looks good everywhere.
Tip: If you want to further match your branding, you can use custom CSS to style the widget.
4. Inbound Agent: Embedding and Customization
Setting Up the Inbound Agent
- In your CallFluent dashboard, select an inbound agent.
- Go to the API forms section to see embedding options.
- Customize the “Call Me Now” button’s text, color, and style as needed.
Tip: The inbound agent uses web-to-speech technology, so leads can talk directly from their device without needing a phone call.
3. Inbound Agent: Adding the Form to Your Website
- Copy the code for the inbound agent’s form from the CallFluent dashboard.
- In your website builder, place the code in the section of your site where you want the inbound agent to appear.
- Save and preview your site. The inbound agent widget should now appear and be ready for use.
Best Practice: Highlight the inbound agent’s convenience—no phone number required for leads to start a conversation.
With CallFluent, you can easily embed both outbound and inbound AI agents on your website. Customize the forms, copy the code from your dashboard, and place it into your site using your website builder.
Use custom CSS code for styling, and always test your forms to ensure a smooth user experience.