> ## Documentation Index
> Fetch the complete documentation index at: https://docs.usesuperflow.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Setup

> How to setup Superflow with Drupal

## 1) Enter Your Site URL

Enter the site URL you want Superflow to be installed in.

<Frame>
  <img src="https://mintcdn.com/superflow/gnnXgtB9B2DXpreO/images/enter-url-final.png?fit=max&auto=format&n=gnnXgtB9B2DXpreO&q=85&s=70fcaae4e19e53003e35d892eff89874" alt="" width="3736" height="1797" data-path="images/enter-url-final.png" />
</Frame>

## 2) Select Other from the list of Platforms

Choose Other from the list of options to install Superflow with Drupal.

<Frame>
  <img src="https://mintcdn.com/superflow/hdb1NqEMmtSslllh/images/select-other-final.png?fit=max&auto=format&n=hdb1NqEMmtSslllh&q=85&s=7c3c214886072822ef45b84683444629" alt="" width="3680" height="1765" data-path="images/select-other-final.png" />
</Frame>

## 3) Copy your unique Superflow code

You can copy your unique Superflow code from the onboarding flow or from your project settings in your dashboard.

<Frame>
  <img src="https://mintcdn.com/superflow/XWbQ_WnDAi9pqsmS/images/copy-code-final.png?fit=max&auto=format&n=XWbQ_WnDAi9pqsmS&q=85&s=9a507d4b7245b769dc531779a40ccbfd" alt="" width="3006" height="1457" data-path="images/copy-code-final.png" />
</Frame>

## 4) Go to your Drupal Admin Panel and configure the page structure to add your Superflow code snippet

In your Drupal Admin Panel, click on Manage in the top left corner and then click on Structure and then Block Layout.

<Frame>
  <img src="https://mintcdn.com/superflow/XWbQ_WnDAi9pqsmS/images/drupal3.png?fit=max&auto=format&n=XWbQ_WnDAi9pqsmS&q=85&s=a932fd85952110d537ad76c291d2f622" alt="" width="2120" height="1120" data-path="images/drupal3.png" />
</Frame>

Next, scroll down and click on Footer Bottom”

<Frame>
  <img src="https://mintcdn.com/superflow/gnnXgtB9B2DXpreO/images/drupal4.png?fit=max&auto=format&n=gnnXgtB9B2DXpreO&q=85&s=07e815034eb0816662008e77cbecc42f" alt="" width="2120" height="1120" data-path="images/drupal4.png" />
</Frame>

A pop up will appear. Inside the popup, click on + Add Content Block.

<Frame>
  <img src="https://mintcdn.com/superflow/gnnXgtB9B2DXpreO/images/drupal5.png?fit=max&auto=format&n=gnnXgtB9B2DXpreO&q=85&s=763c64a46c8ef3931854820249f10d0d" alt="" width="2120" height="1120" data-path="images/drupal5.png" />
</Frame>

## 5) Enter Your Superflow Code Snippet

Under “Block description” add “Superflow Toolbar Block” or any name as block description.

Then, in the “Text format” dropdown below Body text editor, select “Full HTML” .

After that, in the Body text editor, click the “Source” option and paste your code there.

Lastly, click the “Save” button.

<Frame>
  <img src="https://mintcdn.com/superflow/gnnXgtB9B2DXpreO/images/drupal6.png?fit=max&auto=format&n=gnnXgtB9B2DXpreO&q=85&s=904bd429fd5cdd7dffdde7eb21172913" alt="" width="2120" height="1120" data-path="images/drupal6.png" />
</Frame>

You'll then be taken to another configuration page.

On this page, uncheck the "Display Title" checkbox.

Then select "Footer Bootom" in the Region dropdown.

Lastly, click the "Save Block" button.

<Frame>
  <img src="https://mintcdn.com/superflow/gnnXgtB9B2DXpreO/images/drupal7.png?fit=max&auto=format&n=gnnXgtB9B2DXpreO&q=85&s=2961361e2225bf191b699e7cf46ebef5" alt="" width="2120" height="1120" data-path="images/drupal7.png" />
</Frame>

After completing above steps successfully, you would see “Superflow Toolbar Block” added in “Footer Bottom” section as shown in below screenshot.

Be sure to click on "Save Blocks" to finalize your changes.

<Frame>
  <img src="https://mintcdn.com/superflow/XWbQ_WnDAi9pqsmS/images/drupal10.png?fit=max&auto=format&n=XWbQ_WnDAi9pqsmS&q=85&s=4266cd473a6b64f0ae05f6e3a91135d2" alt="" width="2120" height="1120" data-path="images/drupal10.png" />
</Frame>

## 6) Verify your Installation

Verify your Superflow installation by clicking the "Yes, I've Published" button and then the "Verify Install" button on the onboarding flow.

<Frame>
  <img src="https://mintcdn.com/superflow/gnnXgtB9B2DXpreO/images/drupal9.png?fit=max&auto=format&n=gnnXgtB9B2DXpreO&q=85&s=26cc83d4a76a9d28fbaf5aaf982189f2" alt="" width="2120" height="1120" data-path="images/drupal9.png" />
</Frame>

If successful, you should be redirected to your published Drupal site and see the following success message:

<Frame>
  <img src="https://mintcdn.com/superflow/hdb1NqEMmtSslllh/images/verified-final.png?fit=max&auto=format&n=hdb1NqEMmtSslllh&q=85&s=6e1b9b3a5fd451707b5fb936573ef56a" alt="" width="1366" height="1206" data-path="images/verified-final.png" />
</Frame>

## 7) Troubleshooting

Having trouble getting your verifying your installation? Here are the common mistakes users encounter when installing Superflow:

* Did you forget to save the Custom Code?
* Did you forget to publish your site?
* Is the browser still loading a cached version?
* Did you add `?review=true` at the end of your url?
* Did you publish your changes on a staging URL while you are trying to access a Prod URL?
* Did you accidentally install multiple Superflow scripts in the Custom Code?
* Ensure that your website changes have actually been published. You should see be able to see Superflow JS tag in your dev console DOM tree.
* Sometimes the browser is loading the older cached version of your website, so check if you are able to see the Superflow script tag.
* If you still don’t see the toolbar at the bottom right of your website, open dev console to see if there are any errors from Superflow?

## 8) Navigate to your Drupal site

Now that you have verified that Superflow has been installed on your Drupal site, navigate to your published site and add `?review=true` at the end of the URL to enable Superflow.

`Example: mywebsite.drupal.com/?review=true`

## 9) Test out Superflow

You should now see a Superflow toolbar on the bottom right of you screen.

<Frame>
  <img src="https://mintcdn.com/superflow/hdb1NqEMmtSslllh/images/toolbar-final.png?fit=max&auto=format&n=hdb1NqEMmtSslllh&q=85&s=66f1b92617285d5dfc12df908b54e488" alt="" width="3678" height="1775" data-path="images/toolbar-final.png" />
</Frame>

## 10) Dropping your first comment

Try leaving a comment on your page.

You can leave a comment in several different ways:

* By highlighting any text
* By hovering over any element on the page
* By drawing a box anywhere on the page

You can also leave voice and screen recordings in your comments as well!

<Frame>
  <img src="https://mintcdn.com/superflow/XWbQ_WnDAi9pqsmS/images/demo.gif?s=013fcafea837a87dcad1c0d516e1ebee" alt="" width="640" height="360" data-path="images/demo.gif" />
</Frame>
