Add Live Chat to Laravel: Package and Blade Guide

To add live chat to a Laravel application, install the Talkmio Composer package, set your site key in .env and place one Blade component in your layout. The component loads the chat widget and, for signed-in users, passes their name and e-mail so your team knows who is writing. If you prefer not to add a package, the widget is also a single script tag you can paste into any layout. This guide covers both routes, explains how to test them, and deals with the problems Laravel projects usually meet: cached configuration, Inertia and Livewire layouts, content security policies and staging environments.

The steps use Talkmio as the example because it has a ready-made package, but the same ideas apply to most chat widgets.

What You Need Before You Start

A Laravel project you can deploy to, with access to composer.json, .env and your main Blade layout.
A Talkmio account and a site key. Sign in at app.talkmio.com, open Websites, add your website and copy the 12-character key. A free account needs no card.
Version control. Make the change on a branch so it can be reviewed and rolled back.
A staging site. Test there with its own Talkmio website and site key before production.

Method 1: Add Live Chat to Laravel With the Package

The package is a Composer package with a Blade component named <x-talkmio />. It loads the widget and identifies the authenticated user by name and e-mail.

Step 1: Download the package

Open the Laravel page in the Talkmio integrations section and download the ZIP, named talkmio-laravel-1.0.0.zip at the time of writing.

Step 2: Place it in your project

Unzip it into packages/talkmio-laravel in the root of your project. Then add a path repository to composer.json, which tells Composer to read the package from that folder. The Composer documentation on path repositories explains the format.

"repositories": [
    { "type": "path", "url": "packages/talkmio-laravel" }
]

Step 3: Require the package

Run composer require talkmio/laravel:@dev. Commit the package folder together with composer.json and composer.lock, so your deployment can install it in the same way.

Step 4: Set the site key

Add your key to .env:

TALKMIO_SITE_KEY=YOUR_SITE_KEY

If your production server caches configuration, clear and rebuild the cache after changing environment values.

Step 5: Add the component to the layout

In your main layout, just before the closing body tag, add the component:

<x-talkmio />
</body>

Reload a page and the chat bubble should appear. To stop the package from passing user details, set TALKMIO_IDENTIFY=false in .env.

Method 2: Paste the Snippet Into Your Layout

If you do not want a package, copy the one-line script from Websites in the Talkmio app and place it before the closing body tag of your layout:

<script src="https://app.talkmio.com/w/YOUR_SITE_KEY.js" async></script>

This works in Blade, and in a Twig base template if you use Symfony. Store the key in an environment variable and read it through configuration, rather than committing it to a view, so staging and production can differ.

Package vs Snippet: Which to Use

Question	Package	Snippet
Installation	Composer path repository and Blade component	One script tag in a layout
Identifies signed-in users	Yes, name and e-mail	No, unless you set user details yourself
Site key stored in	.env	Wherever you put it, ideally config
Turn identification off	TALKMIO_IDENTIFY=false	Not applicable
Extra dependency	One small package	None
Best for	Apps with logins and a team that wants context	Marketing sites, quick tests, strict dependency policies

Use the package when your visitors log in, because knowing who is writing saves a question in almost every conversation. Use the snippet for a public site where identity does not matter.

Identifying Signed-In Users Safely

Passing a name and e-mail to the chat helps your team greet people properly and find their account. It does not prove who they are. Treat the chat identity as context and verify before discussing sensitive details. Our article on live chat identity verification explains how to do that without making customers feel interrogated.

There is also a privacy side. Tell users in your privacy policy that the chat receives their name and e-mail when they are logged in, and switch identification off for areas where you do not want it. Our guide to a live chat privacy policy lists what to include.

Laravel-Specific Tips

Layouts, Livewire and Inertia

Place the component in the layout that wraps every page. With Livewire, pages change without a full reload, but the layout persists, so the widget stays loaded. With Inertia, put it in the root Blade template rather than in a Vue or React component, so it loads once. If you use client-side routing only, check that the widget does not reload on each navigation.

Cached configuration and views

If the bubble does not appear after deployment, clear the compiled views and the configuration cache, then rebuild them. A stale configuration is the most common reason why a new .env value seems ignored.

Content Security Policy

If your application sends a Content Security Policy, allow scripts from app.talkmio.com, and allow the widget’s connections to the same host. Check the browser console for blocked requests. A strict policy that has not been updated will silently stop the widget from loading.

Admin panels and authenticated areas

You may not want the bubble in your own back office. Place the component only in the public layout, not in the admin layout. If customers use a logged-in area, such as an account page or a customer portal, include it there deliberately, because that is where support questions are likely to arise.

Staging and production

Create a second website in Talkmio for staging with its own site key, and set it through the staging environment file. That keeps test conversations away from real ones. Remember that a database or environment copied from production carries the production key with it.

Queues, jobs and tests

The widget is purely front end, so it does not touch queues or jobs. In automated browser tests, disable it with an environment flag, or leave the key empty in the testing environment, so your tests do not wait for external scripts.

Deploying and Updating the Package

Because the package sits in a local folder and is required as a development version, your deployment needs the folder to be present. A few habits keep this simple and predictable:

Commit the folder. Keep packages/talkmio-laravel in version control, so a fresh checkout on the server contains it before composer install runs.
Use the lock file. Deploy with the committed composer.lock, so every environment installs the same version.
Set the key per environment. Production and staging each need their own TALKMIO_SITE_KEY value in their own environment file or secret store. Never commit real keys to a public repository.
Update deliberately. When Talkmio publishes a new version of the package, replace the folder contents, run Composer again and test on staging before production.
Document it. Add two lines to your README saying where the component is placed and how to disable it. Whoever maintains the project next year will be grateful.

The site key identifies your website in the widget URL, so it is not a password, but treat it as configuration that belongs to a single environment. If you ever need to separate conversations from two environments, create another website in Talkmio rather than reusing a key.

Test Before You Announce It

Open a public page in a private browser window and confirm that the bubble appears.
Log in as a test user and check that the chat shows their name and e-mail in the Talkmio Inbox when you start a conversation.
Ask Mio two or three questions your customers often ask, and check that each answer comes from your own pages.
Ask for a person. The conversation should appear in the Inbox with a “needs human” badge.
Repeat on a phone and check that the bubble does not cover a primary button or a cookie banner.

Use “Try Mio” in the app to see the answer, the knowledge pieces used and how long it took before you go live.

Teach the Assistant About Your Application

A chat widget is only as good as the content behind it. Talkmio’s assistant, Mio, reads your website, FAQ and uploaded documents and answers only from them. In Mio AI, open the knowledge base and add your website; Mio reads every public page on the same domain and respects robots.txt. Add pricing, onboarding steps and policies as pages, Q&A pairs, free text or files such as PDF, DOCX, TXT, MD, CSV and HTML up to 15 MB.

For a software product, a few habits matter. Keep documentation pages public if you want Mio to use them. Write business instructions such as “never promise release dates; hand billing questions to the team”. Re-read sources after a release so answers match the current version. Our guide to training an AI chatbot on your website content explains how to structure pages so answers stay accurate.

Troubleshooting

The bubble does not appear

Check that the component or snippet is in the layout actually used by the page, that the site key is correct and has no spaces, that caches are cleared, and that no ad blocker or Content Security Policy blocks app.talkmio.com. Searching the page source for “talkmio” shows whether the script is present.

It appears twice

You probably used both the package and the snippet, or the component sits in a layout and in a nested view. Remove the duplicate.

User details are missing in the Inbox

Make sure the user is authenticated on that request, that the page uses the package component, and that TALKMIO_IDENTIFY is not set to false.

The page feels slower

The widget loads asynchronously and should not block rendering. Compare the page with and without it, and read our guide to chat widget page speed. The Blade documentation is useful when you restructure layouts.

What Happens After Installation

Visitors can write at any time. Mio answers from your content in their language and hands the conversation to your team when it cannot answer, when the visitor asks for a person, complains, or asks about a specific order. You receive a browser notification, and if nobody is online an e-mail and a push notification on the mobile app follow. Operators reply from the Inbox with quick replies, internal notes and numbered tickets.

The free plan covers one operator, one website and 50 AI answers a month. Pro costs €19 a month with three operators, three websites and 1,000 AI answers. See pricing for details.

Frequently Asked Questions

How do I add live chat to a Laravel application?

Download the Talkmio Laravel package, unzip it into packages/talkmio-laravel, add a path repository to composer.json and run composer require talkmio/laravel:@dev. Set TALKMIO_SITE_KEY in your .env file, then add the x-talkmio Blade component before the closing body tag of your layout and reload the page.

Can I add the chat without installing a package?

Yes. The widget is a single script tag that you can paste before the closing body tag of any Blade layout, or a Twig base template in Symfony. The snippet does not pass signed-in user details, so your team will not see names and e-mails unless you set them yourself.

Does the package identify logged-in users?

Yes, it loads the widget and identifies the authenticated user by name and e-mail. You can turn this off by setting TALKMIO_IDENTIFY=false in your environment file. Identification gives context only, so still verify identity before sharing sensitive information, and mention the practice in your privacy policy.

Why does the chat not show after deployment?

Common causes are a cached configuration that ignores the new .env value, compiled views that were not cleared, a Content Security Policy that blocks app.talkmio.com, or the component sitting in a layout the page does not use. Check the browser console and search the page source for talkmio.

Does the chat work with Livewire and Inertia?

Yes, because the widget is a front-end script loaded by the layout. Put the component in the root Blade layout so it loads once and persists while the page content changes. Check that client-side navigation does not reload it on every page change.

Should I use a separate site key for staging?

Yes. Create a second website in Talkmio, with its own site key, for staging and set it in the staging environment. This keeps test conversations away from real customers and your reports. Remember to change the key if you copy environment settings from production.

The Bottom Line

To add live chat to Laravel, require the package, set the site key and place one component in your layout, or use the single script tag if you prefer no dependency. Then test as a visitor and as a logged-in user, allow the widget in your Content Security Policy, and give Mio clear public pages to learn from. When you are ready, create a free Talkmio account, copy your site key and have the chat running in your application today.

How to Add Live Chat to a Laravel Application