Install Cycles on your Drupal site

Just like  Installing Cycles on your website with Javascript, you can install Cycles on your Drupal site by copying your project's JavaScript snippet into the web page header. 

To install Cycles on your Drupal site:

Step 1: Create a new Cycles project

(If you already have a project, skip to the "existing projects" section of step 2.)

Sign into Cycles and create a new project.  Once you give the new project a name, click Next.

Step 2: Copy the JavaScript snippet

Cycles will display your project’s unique JavaScript code snippet. Select the code and copy it to your clipboard. 

For existing projects, go to your Project Settings > Embed Code to see the project's JavaScript code snippet and copy it to the clipboard.

Step 3: Open your Drupal site and create a new custom block

  1. Login to your Drupal admin (/user/login)
  2. Navigate to the Structure > Block layout  section
  3. In the Header region, choose "Place Block." 
  4. Choose "Add custom block." 
  5. Enter a description for your block.  Now, carefully and in this order, change the Text format to "Full HTML", select "source," and finally paste your Cycles snippet into the body.  Click Save to create the block.

Step 5. Configure your custom block

Once the block is created, you'll need to configure how it behaves on your site. 

  1. Uncheck the "Display Title" checkbox
  2. Adjust Visibility Settings (optional)
    Content Types: Restrict Cycles to particular content types.  For example, show Cycles on all pages, but not articles.
    Pages: Show / Hide Cycles for specific pages.  For example, hide Cycles on the Front page.
    Roles: Restrict Cycles to particular user Roles.  For example, show Cycles only for Drupal user accounts who are logged in.
  3. Update the region to "Header," and save the block.

Step 6. Confirm the block appears in the block layout, and view your site! 

If installed correctly, the Cycles button will display in the lower right corner of the page.  If you don't see the button, try refreshing the page or verifying the javascript is included in the page's source code.

Still need help? Contact Us Contact Us