SaaSFlowDocs

Module · Integrations

Integrations Orbit

Tool logos circling your logo, with buttons and key numbers.

67 settingsPagesBlog postsBlog listings

Where it is used

Content settings

What the module says and shows. Repeaters (groups you can add items to) are marked as such.

SettingTypeWhat it does
EyebrowTextShort label shown above the heading. Leave empty to hide it.Default: INTEGRATIONS
HeadingTextMain heading of this section. Wrap words in [brackets] to highlight them.Default: Integrate effortlessly with [your favorite tools]
DescriptionRich textSupporting text. Keep it to one or two sentences for best results.
Main button textTextText on the main button. Leave empty to hide it.Default: Explore integrations
Main button linkLinkWhere the main button goes.
Main button: HubSpot CTA IDTextOptional. To use a HubSpot CTA instead of the button (so HubSpot tracks its views and clicks), paste the CTA's ID here. Find it in Marketing > CTAs: open the CTA and copy the number from the page address. Needs HubSpot's CTA tool. Leave empty to use the button.
Second button textTextText on the second button. Leave empty to hide it.
Second button linkLinkWhere the second button goes.
Second button: HubSpot CTA IDTextOptional. To use a HubSpot CTA instead of the button (so HubSpot tracks its views and clicks), paste the CTA's ID here. Find it in Marketing > CTAs: open the CTA and copy the number from the page address. Needs HubSpot's CTA tool. Leave empty to use the button.
Center logoGroup · 1 setting
LogoImageYour logo or app icon, square, about 160 x 160px. It sits in the middle of Designs 1 and 3, and above the heading in Design 2. Leave empty to use the theme's logo mark.
Show brand iconsOn/offOn: each logo without an uploaded image shows the brand icon picked for it (Slack, Stripe, HubSpot and more). Off: it shows its letters on a colored circle.Default: Off
Orbiting logosRepeater · 6 settings

The tools that circle the center. 8 to 16 works best. Upload square logos (SVG or PNG); without a logo the letters show on a colored circle.

LogoImageSquare logo, about 96 x 96px.
Brand iconChoiceShows when Show brand icons is on and no logo image is uploaded.Default: Slack
Other iconIconSearch Font Awesome for any brand or icon. Used when Brand icon is set to Other icon.
LettersTextOne or two letters shown when there is no logo.
NameTextShown on hover and read by screen readers.Default: App
LinkLinkOptional page about this integration.
StatsRepeater · 2 settings

Numbers shown under the buttons in Designs 2 and 3. Remove them all to hide the row.

NumberTextThe figure, for example 150+.Default: 100+
LabelTextWhat the number counts, for example Apps integrated.Default: Integrations

Style settings

In the module's Styles tab: layout, color mode, background, fonts, spacing and animation.

SettingTypeWhat it does
DesignChoiceDesign 1: logos circle your logo on half-circle rings below the text. Design 2: logos travel an oval around the text. Design 3: a turning globe of logos beside the text. Design 4: rows of logo cards that scroll sideways.Options: Design 1: Half-circle orbitDesign 2: Logos around the textDesign 3: Logo globeDesign 4: Scrolling logo cardsDefault: Design 1: Half-circle orbit
Heading alignmentChoiceLines up the eyebrow, heading, description, buttons and stats. Design default: centered for designs 1 and 2, left for designs 3 and 4.Options: Design defaultLeftCenteredRightDefault: Design default
Color modeChoice"Same as site" follows Theme settings > Color mode.Options: Same as siteLightDarkDefault: Same as site
Eyebrow styleChoice"Same as theme" follows Theme settings > Eyebrow.Options: Same as themePlain textPillGradient badgeDefault: Same as theme
Highlight colorColorColor of the gradient core, [highlighted] words and the center mark. Starts as the theme's primary color.
FontsGroup · 2 settings
Heading fontFontStarts as the theme's heading font. Change it to use another font in this module only.Default: Outfit
Text fontFontStarts as the theme's body font. Change it to use another font in this module only.Default: Inter
Transparent backgroundOn/offRemoves this section's background so the page background shows through. Useful for blending sections together.Default: Off
Background colorColorLeave empty to use the theme colors for the current light or dark mode.
Background effectGroup · 6 settings
Show background glowOn/offDefault: Off
IntensityNumberHow strong the glow is. 0% hides it.Default: 60
Flowing movementOn/offPlays an entrance animation. Visitors who turn off motion on their device don't see it.Default: On
Fade out at the top and bottomOn/offFades the glow out at the edges so it blends into the next section.Default: On
Glow color 1ColorLeave empty to use the theme primary color.
Glow color 2ColorLeave empty to use the theme accent color.
Background animationChoiceA subtle moving background behind this section. Soft bubbles: glass circles floating. Aurora: large blurred color clouds drifting. Dot grid: a faint dotted pattern drifting. Ripples: soft rings spreading out. Brand colors only; still for visitors who turn off motion.Options: NoneSoft bubblesAurora glowDrifting dot gridRipplesDefault: None
Animation strengthNumberHow visible the background animation is. Lower is subtler.Default: 45
Number of bubblesNumberHow many bubbles float in this section. Phones show about half of them.Default: 6
Bubble arrangementNumber0: this section gets its own random arrangement. Pick any other number to shuffle the bubbles into a new one, for example if a bubble sits behind your text.Default: 0
MotionGroup · 5 settings
Move the logosOn/offVisitors who turn off motion on their device always see the logos still.Default: On
Speed (seconds per turn)NumberTime for one full turn, or for one loop of the scrolling cards. Lower is faster; 60 seconds is calm and steady.Default: 60
DirectionChoiceWhich way the logos travel. In Design 4, clockwise scrolls to the left.Options: ClockwiseCounter-clockwiseDefault: Clockwise
Inner ring or second row goes the other wayOn/offDesign 1 with two rings: the inner ring turns the opposite way. Design 4 with two rows: the second row scrolls the opposite way.Default: Off
Pause on hoverOn/offStops the rotation while the mouse is over the logos, so they're easy to read and click.Default: On
Logos visible at onceGroup · 3 settings

How many logos show at any moment. Design 1: counted across both rings; each ring has twice as many places because its lower half is hidden. Design 2: the logos on the oval. Design 3: the logos on the front of the globe, with as many again behind. Logos repeat when there are more places than logos, and logos beyond the places are left out.

DesktopNumberScreens wider than 1024px.Default: 7
TabletNumberScreens from 601px to 1024px wide.Default: 6
PhoneNumberScreens up to 600px wide. 4 or 5 keeps the logos large enough to tap.Default: 5
OrbitGroup · 6 settings
Rings or rowsChoiceDesign 1: logo rings, a few more logos on the larger outer ring. Design 4: rows of cards, the logos split between them.Options: OneTwoDefault: Two
Logo sizeNumberLargest size of each logo. Logos shrink on small screens and when many are visible, so they never overlap.Default: 56
Logo styleChoiceA white circle in Designs 1 to 3, a square card in Design 4. Letters (when there is no logo) always sit on a colored tile.Options: Logo on a card with a shadowLogo onlyDefault: Logo on a card with a shadow
Ring styleChoiceLook of the rings (Designs 1 and 2) or the glow behind the globe (Design 3).Options: Soft, with a brand gradientSoft onlyThin outlinesDefault: Soft, with a brand gradient
Show names on hoverOn/offA small label with the tool's name appears above a logo on hover or keyboard focus.Default: On
WidthNumberWidth of the half-circle orbit, up to 1000px.Default: 100
SpacingGroup · 4 settings

Leave empty to use the theme section spacing (Theme settings > Layout).

Top padding (desktop)NumberSpace above the content on desktop.
Bottom padding (desktop)NumberSpace below the content on desktop.
Top padding (mobile)NumberSpace above the content on phones.
Bottom padding (mobile)NumberSpace below the content on phones.
Animate when scrolled into viewOn/offContent fades up as the section comes into view. Visitors who turn off motion on their device see no animation.Default: On

Tip

Headings support [brackets] to highlight words and | for a new line. See Editing tips.