diff --git a/client/assets/stylesheets/shared/functions/_z-index.scss b/client/assets/stylesheets/shared/functions/_z-index.scss
index 2272e26dc0484c..34e38b122e0fd3 100644
--- a/client/assets/stylesheets/shared/functions/_z-index.scss
+++ b/client/assets/stylesheets/shared/functions/_z-index.scss
@@ -178,6 +178,7 @@ $z-layers: (
 		'.fullscreen-fader': 200000,
 		'.guided-tours__overlay': 200050,
 		'.guided-tours__step': 201000,
+		'.support-article-dialog__base.dialog__backdrop': 201001,
 		'.wpcom-site__global-noscript': 300000, // JS off always visible
 		'.is-section-woocommerce .global-notices': 999999, //render notices on top of dialogs
 		'.webpack-build-monitor': 99999999,
diff --git a/client/blocks/support-article-dialog/dialog.jsx b/client/blocks/support-article-dialog/dialog.jsx
index ba2e1e25032794..fa8d1b2754c17b 100644
--- a/client/blocks/support-article-dialog/dialog.jsx
+++ b/client/blocks/support-article-dialog/dialog.jsx
@@ -62,6 +62,7 @@ export const SupportArticleDialog = ( {
 		<Dialog
 			isVisible
 			additionalClassNames="support-article-dialog"
+			baseClassName="support-article-dialog__base dialog"
 			buttons={ [
 				<Button onClick={ closeSupportArticleDialog }>
 					{ translate( 'Close', { textOnly: true } ) }
diff --git a/client/blocks/support-article-dialog/style.scss b/client/blocks/support-article-dialog/style.scss
index 9a0f8d914300cc..0c22553331a3a9 100644
--- a/client/blocks/support-article-dialog/style.scss
+++ b/client/blocks/support-article-dialog/style.scss
@@ -1,3 +1,8 @@
+.support-article-dialog__base.dialog__backdrop {
+	// Display above the guided tour.
+	z-index: z-index( 'root', '.support-article-dialog__base.dialog__backdrop' );
+}
+
 .support-article-dialog.dialog.card {
 	position: absolute;
 	top: 0;
diff --git a/client/layout/guided-tours/all-tours.js b/client/layout/guided-tours/all-tours.js
index bd1c1102b6a38c..0f5ad49839c7bc 100644
--- a/client/layout/guided-tours/all-tours.js
+++ b/client/layout/guided-tours/all-tours.js
@@ -15,6 +15,7 @@ import { JetpackSignInTour } from './tours/jetpack-sign-in-tour';
 import { JetpackSiteAcceleratorTour } from './tours/jetpack-site-accelerator-tour';
 import { JetpackVideoHostingTour } from './tours/jetpack-video-hosting-tour';
 import { MainTour } from './tours/main-tour';
+import { marketingConnectionsTour } from './tours/marketing-connections-tour';
 import { MediaBasicsTour } from './tours/media-basics-tour';
 import { SimplePaymentsEmailTour } from './tours/simple-payments-email-tour';
 import { SimplePaymentsTour } from './tours/simple-payments-tour';
@@ -35,6 +36,7 @@ export default combineTours( {
 	jetpackSiteAccelerator: JetpackSiteAcceleratorTour,
 	jetpackVideoHosting: JetpackVideoHostingTour,
 	main: MainTour,
+	marketingConnectionsTour: marketingConnectionsTour,
 	mediaBasicsTour: MediaBasicsTour,
 	simplePaymentsEmailTour: SimplePaymentsEmailTour,
 	simplePaymentsTour: SimplePaymentsTour,
diff --git a/client/layout/guided-tours/config-elements/link.js b/client/layout/guided-tours/config-elements/link.js
index 39e93b8ec25d88..48fd32a6417830 100644
--- a/client/layout/guided-tours/config-elements/link.js
+++ b/client/layout/guided-tours/config-elements/link.js
@@ -8,6 +8,7 @@ import React, { Component } from 'react';
  * Internal dependencies
  */
 import ExternalLink from 'components/external-link';
+import InlineSupportLink from 'components/inline-support-link';
 
 class Link extends Component {
 	static displayName = 'Link';
@@ -19,10 +20,20 @@ class Link extends Component {
 	render() {
 		/* eslint-disable react/jsx-no-target-blank */
 		return (
-			<div className="guided-tours__external-link">
-				<ExternalLink target="_blank" icon={ true } href={ this.props.href }>
-					{ this.props.children }
-				</ExternalLink>
+			<div className="config-elements__link guided-tours__external-link">
+				{ ! this.props.supportArticleId && (
+					<ExternalLink target="_blank" icon={ true } href={ this.props.href }>
+						{ this.props.children }
+					</ExternalLink>
+				) }
+				{ this.props.supportArticleId && (
+					<InlineSupportLink
+						supportPostId={ this.props.supportArticleId }
+						supportLink={ this.props.href }
+					>
+						{ this.props.children }
+					</InlineSupportLink>
+				) }
 			</div>
 		);
 		/* eslint-enable react/jsx-no-target-blank */
diff --git a/client/layout/guided-tours/config.js b/client/layout/guided-tours/config.js
index f9ccd67e8ba7a2..8e427b0a467aa7 100644
--- a/client/layout/guided-tours/config.js
+++ b/client/layout/guided-tours/config.js
@@ -6,6 +6,7 @@ import tutorialSitePreview from 'layout/guided-tours/tours/tutorial-site-preview
 import gdocsIntegrationTour from 'layout/guided-tours/tours/gdocs-integration-tour/meta';
 import simplePaymentsTour from 'layout/guided-tours/tours/simple-payments-tour/meta';
 import editorBasicsTour from 'layout/guided-tours/tours/editor-basics-tour/meta';
+import marketingConnectionsTour from 'layout/guided-tours/tours/marketing-connections-tour/meta';
 import mediaBasicsTour from 'layout/guided-tours/tours/media-basics-tour/meta';
 import checklistSiteTitle from 'layout/guided-tours/tours/checklist-site-title-tour/meta';
 import jetpackBackupsRewind from 'layout/guided-tours/tours/jetpack-backups-rewind-tour/meta';
@@ -32,6 +33,7 @@ export default {
 	jetpackVideoHosting,
 	main,
 	editorBasicsTour,
+	marketingConnectionsTour,
 	mediaBasicsTour,
 	tutorialSitePreview,
 	gdocsIntegrationTour,
diff --git a/client/layout/guided-tours/tours/marketing-connections-tour/index.js b/client/layout/guided-tours/tours/marketing-connections-tour/index.js
new file mode 100644
index 00000000000000..5991ce71f85d72
--- /dev/null
+++ b/client/layout/guided-tours/tours/marketing-connections-tour/index.js
@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import meta from './meta';
+import { ButtonRow, makeTour, Quit, Link, Step, Tour } from 'layout/guided-tours/config-elements';
+import { localizeUrl } from 'lib/i18n-utils';
+
+export const marketingConnectionsTour = makeTour(
+	<Tour { ...meta }>
+		<Step
+			arrow="right-middle"
+			name="init"
+			placement="beside"
+			style={ {
+				marginLeft: '-24px',
+			} }
+			target={ '.sharing-service.not-connected .button.is-compact' }
+		>
+			{ ( { translate } ) => (
+				<>
+					<p>
+						{ translate(
+							"Select the service which you'd like to connect. " +
+								'Whenever you publish a new post, your social media followers will receive an update.'
+						) }
+					</p>
+					<ButtonRow>
+						<Link
+							supportArticleId={ 4789 }
+							href={ localizeUrl( 'https://wordpress.com/support/publicize/' ) }
+						>
+							{ translate( 'Learn more' ) }
+						</Link>
+						<Quit primary>{ translate( 'Got it' ) }</Quit>
+					</ButtonRow>
+				</>
+			) }
+		</Step>
+	</Tour>
+);
diff --git a/client/layout/guided-tours/tours/marketing-connections-tour/meta.js b/client/layout/guided-tours/tours/marketing-connections-tour/meta.js
new file mode 100644
index 00000000000000..80cca061366bec
--- /dev/null
+++ b/client/layout/guided-tours/tours/marketing-connections-tour/meta.js
@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import { isDesktop } from '@automattic/viewport';
+
+export default {
+	name: 'marketingConnectionsTour',
+	version: '20200410',
+	path: [ '/marketing/connections/' ],
+	when: isDesktop,
+};
diff --git a/client/my-sites/customer-home/cards/tasks/connect-accounts.jsx b/client/my-sites/customer-home/cards/tasks/connect-accounts.jsx
new file mode 100644
index 00000000000000..059afa5a5fd2db
--- /dev/null
+++ b/client/my-sites/customer-home/cards/tasks/connect-accounts.jsx
@@ -0,0 +1,101 @@
+/**
+ * External dependencies
+ */
+import React, { useState } from 'react';
+import { useTranslate } from 'i18n-calypso';
+import { connect } from 'react-redux';
+import { Button } from '@automattic/components';
+import { isMobile } from '@automattic/viewport';
+
+/**
+ * Internal dependencies
+ */
+import ActionPanel from 'components/action-panel';
+import ActionPanelTitle from 'components/action-panel/title';
+import ActionPanelBody from 'components/action-panel/body';
+import ActionPanelFigure from 'components/action-panel/figure';
+import ActionPanelCta from 'components/action-panel/cta';
+import Gridicon from 'components/gridicon';
+import QueryPublicizeConnections from 'components/data/query-publicize-connections';
+import { getSelectedSiteId, getSelectedSiteSlug } from 'state/ui/selectors';
+import { savePreference } from 'state/preferences/actions';
+
+/**
+ * Style dependencies
+ */
+import './style.scss';
+
+const ConnectAccountsTask = ( { skipTask, siteSlug } ) => {
+	const translate = useTranslate();
+	const [ isVisible, setIsVisible ] = useState( true );
+
+	if ( ! isVisible ) {
+		return null;
+	}
+	return (
+		<ActionPanel className="tasks connect-accounts">
+			<QueryPublicizeConnections selectedSite />
+			<ActionPanelBody>
+				{ ! isMobile() && (
+					<ActionPanelFigure align="right">
+						<img src="/calypso/images/stats/tasks/social-links.svg" alt="" />
+					</ActionPanelFigure>
+				) }
+				<div className="tasks__timing">
+					<Gridicon icon="time" size={ 18 } />
+					<p>{ translate( '3 minutes' ) }</p>
+				</div>
+				<ActionPanelTitle>{ translate( 'Drive traffic to your site' ) }</ActionPanelTitle>
+				<p className="tasks__description">
+					{ translate(
+						'Integrate your site with social media to automatically post your content and drive traffic to your site.'
+					) }
+				</p>
+				<ActionPanelCta>
+					<Button
+						className="tasks__action"
+						primary
+						href={
+							isMobile()
+								? `/marketing/connections/${ siteSlug }`
+								: `/marketing/connections/${ siteSlug }?tour=marketingConnectionsTour`
+						}
+					>
+						{ translate( 'Connect accounts' ) }
+					</Button>
+					<Button
+						className="tasks__action-skip is-link"
+						onClick={ () => {
+							setIsVisible( false );
+							skipTask();
+						} }
+					>
+						{ translate( 'Skip for now' ) }
+					</Button>
+				</ActionPanelCta>
+			</ActionPanelBody>
+		</ActionPanel>
+	);
+};
+
+const mapStateToProps = state => {
+	return {
+		siteId: getSelectedSiteId( state ),
+		siteSlug: getSelectedSiteSlug( state ),
+	};
+};
+
+const mapDispatchToProps = {
+	skipTask: siteId =>
+		savePreference( `dismissible-card-home-task-connect-accounts-${ siteId }`, true ),
+};
+
+const mergeProps = ( stateProps, dispatchProps, ownProps ) => {
+	return {
+		...stateProps,
+		skipTask: () => dispatchProps.skipTask( stateProps.siteId ),
+		...ownProps,
+	};
+};
+
+export default connect( mapStateToProps, mapDispatchToProps, mergeProps )( ConnectAccountsTask );
diff --git a/client/my-sites/customer-home/cards/tasks/style.scss b/client/my-sites/customer-home/cards/tasks/style.scss
new file mode 100644
index 00000000000000..ba95c7304dc51d
--- /dev/null
+++ b/client/my-sites/customer-home/cards/tasks/style.scss
@@ -0,0 +1,30 @@
+.tasks.action-panel {
+	.tasks__timing {
+		display: flex;
+
+		.gridicon {
+			margin-right: 4px;
+		}
+	}
+
+	.action-panel__title {
+		font-family: 'Recoleta', serif;
+		font-size: 36px;
+	}
+
+	.action-panel__figure {
+		max-width: 280px;
+	}
+
+	.tasks__description {
+		font-size: 16px;
+	}
+
+	.action-panel__cta {
+		display: flex;
+
+		.tasks__action-skip {
+			margin: auto 16px;
+		}
+	}
+}