Adding the code to your website
This works on any website, including Wix, Squarespace, Webflow or a custom HTML site.
Step 1: Copy your widget code
In the dashboard, go to "Settings" → "Installation" and click copy next to "Embed Code". You'll find the same code on "Overview" and under "Integrations" → "Other website".
Step 2: Paste the code before </body>
Paste the code on every page just before the </body> tag, or into the custom code or footer scripts field of your website builder.
Step 3: Check your website
Open your website in a new window. The chat button appears in the bottom corner. Send a test message; the conversation shows up in your "Shared inbox".
Is the code hidden with a notice that the widget code is paused? Then the data processing agreement is still missing. Accept it in your account on twilper.com.
WordPress and WooCommerce
Step 1: Install from WordPress.org
In WordPress, go to Plugins → Add New Plugin, search for "TwilperChat", click Install Now and then Activate.
Step 2: Or upload the zip
Can't install plugins from WordPress.org? Download the "TwilperChat WordPress plugin (.zip)" under "Integrations" → "WordPress" and upload it via Plugins → Add New Plugin → Upload Plugin. Then activate the plugin.
Step 3: Enter your widget key
In WordPress, go to Settings → TwilperChat → Connection. Paste the key shown with the WordPress steps in the dashboard, save the connection and then test it.
Step 4: Optional: sync pages and products
Want the AI to know your pages, posts and WooCommerce products? Create a sync key in the dashboard under "Integrations" ("Sync key for the WordPress plugin") and paste it into the plugin. The key is only shown once.
Shopify
Step 1: Open the Shopify listing
Go to "Integrations", choose "Shopify" and click "Open Shopify listing".
Step 2: Install the app
Complete the installation in Shopify. The widget is switched on in your active theme; check it in your store.
Step 3: Check the sync
Check in Twilper that the product sync has completed, so the AI can answer questions about your products.
Does the button say "New Shopify installations are paused"? Then you can add the widget code to your theme yourself for now, or sync products manually with your store address (yourstore.myshopify.com).
Has my widget been detected?
The first time the widget loads on your website, Twilper registers that domain with your license. "Add the widget" in the checklist on "Overview" then turns green.
- Not green yet? Open your website, refresh the page and check that the chat button appears.
- Make sure the code is on the published site, not only in a draft or preview.
- Your license sets how many domains the widget may run on. If a new domain is refused, deactivate an old one or choose a larger plan.
Colors, name and welcome message
In the "Widget Designer" you decide how the widget looks and behaves. You see your changes instantly in the "Live Preview".
Step 1: Name and look
Enter the "Bot name" and, if you like, an avatar. Under "Colors", choose your "Primary color" and the bubble colors, or click "Twilper style".
Step 2: Text and tone
Under "Text & Tone", write your "Welcome message" and "Placeholder text", and choose formal or informal. Under "Texts per language" you set the same texts for English, German, French and Spanish.
Step 3: Behavior
Under "Behavior", choose the "Position" (bottom right or bottom left) and the button size. Optionally switch on "Suggested questions", a "Proactive message" or "Lead capture".
Step 4: Save
Click "Save". The widget on your website picks up the changes.
Good to know
- The widget automatically uses your visitor's language, based on the page and the message.
- Add the code once per page; duplicate code can show two chat buttons.
- Custom CSS is only available on the Business plan.
- With "Show source citations" visitors see which page an answer is based on.