Semolina Chatbot Integration Guide

Learn how to integrate the Semolina chatbot on any platform with just one line of code. Works with Next.js, React, Shopify, WordPress, and more.

Quick Start

Universal Integration Code

<script src="https://semolina.io/api/widget/script?domainId=YOUR_DOMAIN_ID"></script>

Replace YOUR_DOMAIN_ID with your actual domain ID from the Semolina dashboard.

Secure

HTTPS enabled with CORS support

Responsive

Works on all devices and screen sizes

Fast

Lightweight and loads asynchronously

Platform-Specific Integration

AI Development Tools

Use these prompts with AI development tools to automatically integrate the Semolina chatbot when building your app.

B

Bolt.new

AI-powered app builder

Please integrate the Semolina AI chatbot into my app. Add this script tag to the head section of my HTML:

<script src="https://semolina.io/api/widget/script?domainId=YOUR_DOMAIN_ID"></script>

The chatbot will appear as a floating chat button in the bottom-right corner. Replace YOUR_DOMAIN_ID with the actual domain ID from the Semolina dashboard.
❤

Loveable

AI app development platform

I want to add a Semolina AI chatbot to my app. Please include this integration:

1. Add this script tag to the head section:
<script src="https://semolina.io/api/widget/script?domainId=YOUR_DOMAIN_ID"></script>

2. The chatbot will automatically appear as a floating chat button in the bottom-right corner
3. Users can click it to open a chat window and interact with the AI
4. Replace YOUR_DOMAIN_ID with the actual domain ID from the Semolina dashboard

Make sure the script is loaded in the head section for proper functionality.
v0

v0.dev

Vercel's AI UI generator

Please integrate the Semolina AI chatbot widget into my application. Here are the requirements:

1. Add this script tag to the HTML head section:
<script src="https://semolina.io/api/widget/script?domainId=YOUR_DOMAIN_ID"></script>

2. The chatbot should appear as a floating chat button in the bottom-right corner of the page
3. When clicked, it opens a chat window where users can interact with the AI
4. The widget should be responsive and work on all device sizes
5. Replace YOUR_DOMAIN_ID with the actual domain ID from the Semolina dashboard

The chatbot will handle customer inquiries, collect information, and provide automated support.

How to use these prompts

Copy the prompt for your preferred AI development tool and paste it into the tool's interface. The AI will automatically integrate the Semolina chatbot into your app during the development process.

Advanced Customization

Custom Styling

/* Customize widget position */
#semolina-chatbot-widget {
    bottom: 20px !important;
    right: 20px !important;
}

/* Customize chat button */
#semolina-toggle {
    background: #your-brand-color !important;
    border-color: #your-brand-color !important;
}

/* Customize chat window */
#semolina-window {
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
}

Conditional Loading

Load the widget only on specific pages or under certain conditions.

// Only load on specific pages
if (window.location.pathname === '/contact') {
  // Load widget script
}

Dynamic Domain ID

Set domain ID dynamically from your CMS or configuration.

const domainId = window.SEMOLINA_DOMAIN_ID || 'default';
const script = document.createElement('script');
script.src = `https://semolina.io/api/widget/script?domainId=${domainId}`;

Troubleshooting

Widget doesn't appear

  • • Check browser console for JavaScript errors
  • • Verify the domain ID is correct
  • • Ensure the script is loaded in the <head> section
  • • Check if the script URL is accessible

CORS errors

  • • Verify CORS headers are set in your server configuration
  • • Check that the API endpoints are accessible
  • • Ensure you're using HTTPS in production

Performance issues

  • • Use async loading for the script
  • • Consider lazy loading on scroll or user interaction
  • • Monitor network requests in browser dev tools

Testing Your Integration

Before Integration

  • Test the widget script URL in your browser
  • Verify your domain ID is correct
  • Check API endpoints are accessible

After Integration

  • Check browser console for errors
  • Test on different devices and browsers
  • Verify chat functionality works

Ready to Get Started?

Get your domain ID from the Semolina dashboard and start integrating the chatbot on your website today.

Go to DashboardTest Widget