Pineapple Builder

Connect other tools to your website

An integration connects your website to another service, such as a booking tool, form provider or analytics account. Choose the simplest supported method for the job and follow that provider's current setup instructions.

Choose the connection type

  • A link: send visitors to an existing booking, payment or form page. Set the destination on a button or link.

  • An Embed block: place a visible widget inside a particular page or section.

  • Website integration settings: use the supported service configuration when Pineapple provides one.

  • Website scripts: install code that the provider says should run across the website, such as a tracking tag.

These methods are not interchangeable. A visible form needs a place to appear; a website-wide tracking script usually does not belong in an ordinary paragraph.

Check the provider and account

Open the setup instructions from the service you intend to use. Confirm that the form, calendar or property belongs to your business and that the provider allows the intended embedding or installation method.

Check any separate provider subscription and the Pineapple plan requirement shown in your account. A Pineapple subscription does not automatically pay for an external service.

Add a visible widget

Open the target page and add an Embed block. Use the embed code provided for that widget and check the space it needs in the layout. Some services provide both a visible element and a script that initialises it; follow the complete instructions.

Save and publish, then test the public page. The editor canvas may not run every external widget in the same way as the public site. See the Embed reference.

Example: show your location on a map

In Google Maps on a computer, find the correct business or address. Open its sharing controls, choose Embed a map, and copy the HTML. Paste that embed code into an Embed block on your contact or location page. A normal Google Maps sharing link belongs in a link or button, not in the embed-code field.

Add the address as readable page text next to the map and offer a directions link. Check the location marker, the map's height, and phone scrolling after publishing. Follow Google's current map sharing and embedding instructions.

Widgets that include an element and a script

Some providers give you a placeholder element, such as a div or span, plus a script that fills it. Keep the full widget snippet together in an Embed block when that is the provider's installation method. Do not paste it into ordinary text: displaying code is different from running a widget.

If the provider explicitly separates a website-wide loader from the page widget, put the loader in the requested website script location and keep the visible element in the page's Embed block. Avoid loading the same widget twice. Publish and test the real visitor flow; a placeholder appearing alone usually means the widget has not initialised successfully.

Add website-wide code

Open the website's script settings and use the location specified by the provider: Head code, Body code or Footer body code. Save the correct field after changing it.

These settings apply across website pages. Preserve unrelated existing code, and avoid installing the same integration in several places. Never place a secret API key in public website code; use the provider's browser-safe installation method.

Check the visitor journey

Open the published page and test the intended action. Check the destination service for the result when appropriate. A widget appearing on screen does not prove that an appointment, enquiry or payment completed.

Check the layout on a phone and confirm that the widget does not cover navigation or the main action. For tracking tools, use the provider's test tools and avoid duplicate tags.

If it fails

Check the copied code, allowed domain, account or widget identifier, publication state and provider requirements. Look for visible errors and confirm the service itself is available. If you remove a test integration, remove only its own code and verify the page again.

Browse the integration examples for supported starting points, and use Forms when the built-in contact form already covers the job.

Pineapple Builder - AI Website Builder Create Docs