Skip to content

Conditionally show CTA buttons based on device type #201

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yerol merged 2 commits into from
Mar 4, 2026
Merged

Conditionally show CTA buttons based on device type #201

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3f0c37e
create AddToBrowser general component, use it in Nav, Hero and Impact
gsambrotta Feb 11, 2026
78e12e3
display two buttons on the same row, give text-small to both cta buttons
gsambrotta Feb 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 65 additions & 0 deletions src/components/common/AddToBrowserCTA.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<script setup lang="ts">
import { computed, ref, onMounted } from 'vue';
import AddToChromeButton from '@/components/ui/AddToChromeButton.vue';
import AddToFirefoxButton from '@/components/ui/AddToFirefoxButton.vue';
import Button from '@/components/ui/Button.vue';

const props = withDefaults(
defineProps<{
showFreeBadge?: boolean;
userAgent?: string; // for testing if true, show AddTo button even on mobile/tablet */
ctaLink: string;
label: string;
}>(),
{
showFreeBadge: true,
userAgent: undefined,
},
);

const userAgent = computed(() => (props.userAgent ?? navigator.userAgent).toLowerCase());
const isFirefox = computed(() => userAgent.value.includes('firefox'));
const isMobileOrTablet = ref(false);

onMounted(() => {
const hasTouch = navigator.maxTouchPoints > 0 || 'ontouchstart' in window;
const isMobileUserAgent = /android|iphone|ipad|ipod|mobile|tablet/.test(userAgent.value);
isMobileOrTablet.value = hasTouch && isMobileUserAgent;
});

const submit = (event?: Event) => {
event?.preventDefault();
const params = new URLSearchParams({
redirect_to: 'https://elliotforwater.com/',
});

window.open(`${props.ctaLink}?${params.toString()}`, '_blank');
};
</script>

<template>
<!-- Mobile/Tablet -->
<div v-if="isMobileOrTablet" class="w-full">
<slot name="mobileHint" />
<div class="flex items-start gap-2 md:gap-6 justify-center">
<Button variant="secondary" class="text-sm sm:text-base" @click="submit">
{{ props.label }}
</Button>

<slot name="secondCta" />
</div>
</div>

<!-- Desktop View -->
<div v-else class="flex items-start gap-2 md:gap-6 justify-center">
<div class="relative">
<AddToChromeButton v-if="!isFirefox" />
<AddToFirefoxButton v-else />

<div v-if="showFreeBadge" class="max-w-[70px] md:max-w-[100px] lg:max-w-[172px] w-full -translate-x-[40%] sm:-translate-x-[98%] sm:-translate-y-[2%]">
<img src="/icons/free-icon.svg" alt="free-icon" />
</div>
</div>
<slot name="secondCta" />
</div>
</template>
11 changes: 3 additions & 8 deletions src/components/common/Navbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@
import { ref, watch, onUnmounted } from 'vue';
import { RouterLink } from 'vue-router';
import Button from '../ui/Button.vue';
import AddToChromeButton from '../ui/AddToChromeButton.vue';
import AddToFirefoxButton from '../ui/AddToFirefoxButton.vue';
import AddToBrowserCTA from './AddToBrowserCTA.vue';

// navigation links
const navLinks = [
Expand Down Expand Up @@ -50,10 +49,6 @@ const scrollToSection = (hash: string) => {
}
}
};

let userAgent = navigator.userAgent;
// let isChrome = userAgent.includes('Chrome') && !userAgent.includes('OPR');
let isFirefox = userAgent.includes('Firefox');
</script>

<template>
Expand Down Expand Up @@ -85,8 +80,8 @@ let isFirefox = userAgent.includes('Firefox');

<!-- Right Side Buttons -->
<div class="flex gap-2 shrink-0 relative z-50">
<AddToChromeButton v-if="!isFirefox" />
<AddToFirefoxButton v-if="isFirefox" />
<AddToBrowserCTA :showFreeBadge="false" ctaLink="https://magic.beehiiv.com/v1/e9406cdd-094c-4ff2-a866-49b0aa2dd605" label="Send me the link" />

<!-- Hamburger (Mobile only) -->
<Button variant="primary" class="block lg:hidden !rounded-2xl" @click="toggleMenu">
<span v-if="!isMenuOpen">☰</span>
Expand Down
26 changes: 10 additions & 16 deletions src/components/sections/home/hero.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
<script setup lang="ts">
import AddToChromeButton from '@/components/ui/AddToChromeButton.vue';
import AddToFirefoxButton from '@/components/ui/AddToFirefoxButton.vue';
import Button from '@/components/ui/Button.vue';

let userAgent = navigator.userAgent;
// let isChrome = userAgent.includes('Chrome') && !userAgent.includes('OPR');
let isFirefox = userAgent.includes('Firefox');
import AddToBrowserCTA from '@/components/common/AddToBrowserCTA.vue';
</script>

<template>
Expand All @@ -31,16 +26,15 @@ let isFirefox = userAgent.includes('Firefox');
Elliot for Water is a free productivity dashboard that helps you stay focused while supporting clean water projects around the world.
</p>

<div class="flex items-start gap-2 md:gap-6 justify-center">
<div class="relative">
<AddToChromeButton v-if="!isFirefox" />
<AddToFirefoxButton v-if="isFirefox" />
<div class="max-w-[70px] md:max-w-[100px] lg:max-w-[172px] w-full -translate-x-[40%] sm:-translate-x-[98%] sm:-translate-y-[2%]">
<img src="/icons/free-icon.svg" alt="free-icon" />
</div>
</div>
<Button variant="primary" href="#how_it_works"> Discover more </Button>
</div>
<AddToBrowserCTA ctaLink="https://magic.beehiiv.com/v1/e9406cdd-094c-4ff2-a866-49b0aa2dd605" label="Send me the link">
<template #mobileHint>
<div class="text-base text-center text-text-body pb-1 mb-2">Elliot for Water is only available on desktop, leave your email, and we’ll send you the download link.</div>
</template>

<template #secondCta>
<Button variant="primary" class="text-sm sm:text-base" href="#how_it_works">Discover more</Button>
</template>
</AddToBrowserCTA>
</div>

<div class="w-full">
Expand Down
24 changes: 8 additions & 16 deletions src/components/sections/home/impact.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
<script setup lang="ts">
import AddToChromeButton from '@/components/ui/AddToChromeButton.vue';
import AddToFirefoxButton from '@/components/ui/AddToFirefoxButton.vue';
import AddToBrowserCTA from '@/components/common/AddToBrowserCTA.vue';
import CardDetails from '@/components/ui/card/CardDetails.vue';
import SectionTitle from '@/components/ui/SectionTitle.vue';

let userAgent = navigator.userAgent;
// let isChrome = userAgent.includes('Chrome') && !userAgent.includes('OPR');
let isFirefox = userAgent.includes('Firefox');
</script>

<template>
Expand All @@ -26,16 +21,13 @@ let isFirefox = userAgent.includes('Firefox');
</CardDetails>
</div>
<div class="flex flex-col items-center gap-6 pt-6">
<AddToChromeButton v-if="!isFirefox" />
<AddToFirefoxButton v-if="isFirefox" />
<div class="flex items-center flex-wrap gap-2 md:gap-4 px-[2%]">
<p class="uppercase text-neutral-400 text-xs md:text-sm">Available for Chrome & Firefox</p>
<div class="flex items-center gap-2 md:gap-3">
<img src="/logos/chrome-logo.svg" alt="chrome-icon" class="size-4 sm:size-5" />
<img src="/logos/firefox-logo.svg" alt="chrome-icon" class="size-4 sm:size-5" />
<!-- <img src="/logos/edge-logo.svg" alt="chrome-icon" class="size-4 sm:size-5" /> -->
</div>
</div>
<AddToBrowserCTA :showFreeBadge="false" ctaLink="https://magic.beehiiv.com/v1/e9406cdd-094c-4ff2-a866-49b0aa2dd605" label="Send me the link">
<template #mobileHint>
<div class="text-text-body text-sm md:text-base font-medium text-center pb-1 mb-2">
Elliot for Water is only available on desktop, leave your email, and we’ll send you the download link.
</div>
</template>
</AddToBrowserCTA>
</div>
</div>
</div>
Expand Down