Infinity Pro AI
Back to Help Center
Integrations
5 min read

Installing the Web Chat Widget

Add a live chat widget to your website for instant customer engagement.

Turn website visitors into customers with a live chat widget. Your AI assistant can answer questions, book appointments, and qualify leads 24/7—right on your website.

Why Add a Chat Widget?

  • Instant engagement: Catch visitors before they leave
  • Higher conversions: Chat visitors convert 3-5x more than non-chat
  • 24/7 availability: AI never sleeps
  • Reduce phone calls: Handle simple questions via chat

Generating Widget Code

1

Access Widget Settings

Go to Settings → Integrations → Website Chat Widget

📸 Screenshot: Widget settings page
2

Customize Widget Appearance

Configure how the widget looks:

  • Color: Match your brand colors
  • Position: Bottom right or bottom left
  • Size: Compact, medium, or large
  • Avatar: Upload your logo or use default
  • Greeting: "Hi! How can we help?"
📸 Screenshot: Widget customization options
3

Copy Installation Code

Click Generate Code

You'll see a code snippet like:

<script> (function(w,d,s,o,f,js,fjs){ w['InfinityProAI']=o;w[o]=w[o]||function(){ (w[o].q=w[o].q||[]).push(arguments)}; js=d.createElement(s),fjs=d.getElementsByTagName(s)[0]; js.id=o;js.src=f;js.async=1; fjs.parentNode.insertBefore(js,fjs); }(window,document,'script','ipa','https://widget.infinityproai.com/widget.js')); ipa('init', 'YOUR_WIDGET_ID'); </script>

Click Copy Code

Installing on WordPress

4

WordPress Installation Method 1: Plugin

Easiest method for WordPress users:

  1. In WordPress, go to Plugins → Add New
  2. Search for "Infinity Pro AI"
  3. Click Install then Activate
  4. Go to Settings → Infinity Pro AI
  5. Paste your Widget ID
  6. Click Save
5

WordPress Installation Method 2: Manual

If you prefer manual installation:

  1. Go to Appearance → Theme Editor
  2. Select footer.php
  3. Paste the widget code before </body>
  4. Click Update File
📸 Screenshot: WordPress theme editor
Important

Editing theme files directly can break your site if done incorrectly. Always backup first or use the plugin method.

Installing on Custom Sites

6

HTML Website Installation

For custom HTML websites:

  1. Open your website's HTML file
  2. Find the closing </body> tag
  3. Paste the widget code just before it
  4. Save and upload to your server
7

Shopify Installation

For Shopify stores:

  1. Go to Online Store → Themes
  2. Click Actions → Edit Code
  3. Open theme.liquid
  4. Paste widget code before </body>
  5. Click Save
8

Wix Installation

For Wix websites:

  1. In Wix Editor, click Settings
  2. Go to Custom Code
  3. Click + Add Custom Code
  4. Paste the widget code
  5. Set to load on All Pages
  6. Place code in Body - end
  7. Click Apply

Widget installed! Visit your website to see it in action. It may take a few minutes to appear.

Customizing Widget Behavior

9

Set Widget Triggers

Configure when the widget appears:

  • Immediately: Show as soon as page loads
  • After delay: Wait 5-10 seconds
  • On scroll: Show after scrolling 50%
  • On exit intent: Show when user tries to leave
📸 Screenshot: Widget trigger settings
10

Configure Proactive Messages

Have the widget initiate conversation:

After 15 seconds: "Hi there! 👋 Need help finding something?"
After 30 seconds: "I can answer questions or help you book an appointment!"

Tip

Don't be too aggressive. Showing the widget after 5-10 seconds is less annoying than instant popup.

Mobile Optimization

11

Configure Mobile Display

Optimize for mobile visitors:

  • Smaller button: Takes less screen space
  • Full-screen chat: Better mobile UX
  • Tap to open: No auto-expand on mobile

Best Practices

  • Match your brand: Use your brand colors and logo
  • Clear greeting: Tell visitors what the chat can do
  • Don't obstruct content: Position carefully
  • Test on mobile: 60% of traffic is mobile
  • Monitor conversations: Review chat quality weekly
  • Update responses: Train AI with common website questions

Frequently Asked Questions

Will the widget slow down my website?

No. The widget loads asynchronously and is optimized for speed. It typically adds less than 0.1 seconds to load time.

Can I hide the widget on certain pages?

Yes! In widget settings, specify pages to exclude (e.g., checkout page, thank you page).

Can visitors attach files in chat?

Yes, if you enable it. Useful for receiving photos, documents, etc.

Does it work with GDPR?

Yes. The widget includes cookie consent and privacy policy links. Configure in widget settings.

Troubleshooting

Widget not appearing

Solution: Clear browser cache. Check that code is before </body> tag. Verify Widget ID is correct. Check browser console for errors.

Widget appears but doesn't respond

Solution: Verify AI is enabled in settings. Check that widget is connected to your account. Test with a simple message like "hello."

Widget looks broken on mobile

Solution: Enable mobile optimization in settings. Test on actual device, not just browser resize. Update to latest widget version.

Widget conflicts with other chat tools

Solution: Remove other chat widgets. Only one chat widget should be active at a time to avoid conflicts.

Still need help?

Can't find what you're looking for? Our support team is ready to assist you.