Add Gorilla Dash content and a chatbot to your website

The Gorilla Dash Website SDK connects your website to published Gorilla Dash content. It works with plain JavaScript, Vue, React and other JavaScript frameworks. The browser script also includes the chatbot, so a new website can use one Gorilla Dash script for both.

This guide is for the developer installing it. The JavaScript reference contains copyable installation examples, options and methods. Use the GraphQL reference to choose the content fields to request, or the REST API reference for REST integrations.

Choose the frontend and backend packages separately

• Frontend: the browser script website-sdk.js adds window.GorillaDash, which fetches website content directly from the browser to Gorilla Dash. Vue is not required. The same client is available as the @gorilladash/website-sdk module on request from Gorilla Dash support.
• Backend: gorilladash/laravel-website-sdk is a separate Composer package for Laravel queries and caching. Install it when your server needs content for rendering.
• Script installation: add the browser script https://gorilladash.com/website-sdk.js?v=1 to your pages. This is the supported way to install the SDK today; the @gorilladash/website-sdk module package is not yet available from npm.

Install the browser script

Add one script element pointing to https://gorilladash.com/website-sdk.js?v=1. Set defer and initialise your integration after the script has loaded. It exposes window.GorillaDash. The reference page includes the full script tag and a working query example.

The script is supported on Chrome and Edge 103, Firefox 100 and Safari 16, or later. In older browsers it may fail to load or its content requests may fail, and the chatbot included in it may not start. If your website must offer chat to visitors on older browsers, keep your existing chat-widget.js embed instead, because it does not have this requirement.

To start the chatbot automatically, copy the organisation slug and chatbot ID from your existing chatbot embed into data-org and data-chatbot on the new script. Without those attributes, the content client is available and no chatbot starts automatically.

Connect website content

1. On your server, exchange the website's API ID and API Access Token for a website token, using the access-token process in the GraphQL reference. Keep the website token on your server.
2. Still on your server, exchange the website token for a browser token at https://graphql.gorilladash.com/oauth/website-browser-token, and write it into the page as window.websiteAccessToken. A browser token lasts one hour and can only read published content. The Authentication section of the reference has the code for both steps.
3. Create a content client with GorillaDash.createClient({ accessToken: () => window.websiteAccessToken }). If a page can stay open for longer than an hour, pass a function that fetches a new browser token from your server instead; the reference shows how.
4. Call client.query("{ websiteInfo { name url } }"). The promise resolves to the GraphQL data object, so this example returns data.websiteInfo. Pass query variables as the second argument when needed.
5. Render the returned content and show a useful fallback if the request fails. The client reports HTTP errors and GraphQL errors, and times out after 15 seconds by default.

The default content endpoint is https://graphql.gorilladash.com/graphql. Requests go directly to Gorilla Dash without browser cookies. When Gorilla Dash refuses an expired browser token, the SDK asks your access-token function for a new one once and repeats the request.

Send enquiries and forms through your server

A browser token cannot send anything to Gorilla Dash. Enquiries, form responses, reviews, sign-ins and orders go from the visitor's browser to your own server first, and your server sends them on with the website token. If you try one with a browser token, Gorilla Dash answers with the error code WEBSITE_TOKEN_READ_ONLY. Your server is also the right place to check the submission and add a CAPTCHA if your site needs one.

Know what a browser token is limited to

Because anyone can copy a browser token, Gorilla Dash limits what it can ask for. One request can batch at most 10 queries, and Gorilla Dash may also limit how many queries each visitor can run a minute; past that limit it answers with HTTP 429 and the error code WEBSITE_TOKEN_THROTTLED, and your site should wait and try again. Reviews and product ranges return at most 100 rows, even when you leave out the number to return or ask for more. A few values meant only for your own server read as empty: a product's supplier and supplier identifier, and a job salary you have chosen not to show. When your website needs any of these, request it on your server with the website token, which has none of these limits.

Keep an existing chatbot working

Existing chat-widget.js installations continue to work and do not need to change. For a new combined installation, use the website script with the same chatbot settings. If a matching legacy embed is already present, the SDK uses that widget instead of creating a second chatbot. To start it later, call GorillaDash.chatbot.load({ org: "your-organisation-slug", chatbot: 42 }) with your own values.

Use modules or Apollo

Unless Gorilla Dash support has supplied the module to you, use the browser script. Module-based applications import createWebsiteClient from @gorilladash/website-sdk. The optional @gorilladash/website-sdk/apollo adapter requires Apollo Client 4 and GraphQL 16. Start with persistedQueries: false for ordinary POST requests; enable persisted queries only after verifying the organisation and website namespace against your endpoint. Importing the module does not start a chatbot: use the browser script for that.

If your website is written in TypeScript, the TypeScript and autocomplete section of the reference shows how to generate a type for every query from the published schema, so your editor completes field names and checks each query before the site is built. It also shows server rendering with the Apollo adapter.

Render your pages, menus and articles

Once the client can run a query, your website asks Gorilla Dash for each piece of content it shows and places it in your own layout. The Render a website page section of the reference has a copyable example for each step below.

1. Pages: read the page slug from the last part of the address, and the page template slug from the part before it when there is one, and request the page with websitePage(slug: …, template_slug: …). Put name, meta_title and meta_description into the page heading and head, and the body into your content area. Template fields are in contents; find each one by the name shown on the page's edit screen.
2. Missing pages: websitePage returns nothing when no page has that slug. Check the rules from websiteRedirects and send the visitor to the matching to address; otherwise show a "page not found" message. A from value can be a pattern with named parts or wildcards, so match it the way the reference shows rather than comparing text.
3. Menus: request a menu by its name with websiteMenu(name: …). The links are in menu_json.children, each with a label, a path and its own children for drop-downs.
4. Articles: use articlesPagination for a list and article(slug: …) for one article. Only published articles are returned, so a draft never appears on your website.
5. Tribes: a tribe is one location, branch or business unit in your organisation. List them with tribes, and build each link from websiteInfo.base_tribes_path followed by the tribe's slug.
6. Images: each image offers several sizes, such as banner, square and thumbnail. A size that was never generated is empty, so fall back to default, the original upload.

Content requested with the browser client is never cached, so visitors always see your latest edits and every page view makes a request to Gorilla Dash. For a busy website, render pages on your server and cache them there. The reference explains both under Caching and freshness.

Render pages for search engines and AI crawlers

A browser script alone does not prerender a page. Use server-side rendering or static generation to send populated HTML on the initial page request. Browser updates can then fetch content directly from Gorilla Dash. Create a separate client and cache for each server-rendered request; never share credentials or visitor state across requests.

Check the installation

• Confirm the website script returns JavaScript successfully and the browser exposes GorillaDash.createClient.
• Run the website-info query and confirm it returns your intended website.
• Check that content requests go to Gorilla Dash, and that the only token in the page source and browser requests is the browser token. Neither the API Access Token nor the website token should appear.
• If you enabled the chatbot, confirm one widget appears and opens correctly.
• For server-rendered sites, inspect the initial HTML to confirm headings and content are present before browser JavaScript runs.