Aimpress/Shumiland
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

feat(widget): replace Binotel smart-button with styled GetCall widget
Some checks are pending
CI / Type Check (push) Waiting to run
Details
CI / Lint (push) Waiting to run
Details
CI / Unit Tests (push) Waiting to run
Details
Deploy / Build & Push Image (push) Waiting to run
Details
Deploy / Deploy to VPS (push) Blocked by required conditions
Details

Browse source 
Switch to getcall widget script, position button bottom-right, apply
Shumiland brand colors (green #396817 / orange #f28b4a), and use
Shumi mascot photo as button icon.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko 2026-05-15 11:12:50 +01:00
parent 79b24ef3d9
commit 1378b9a809
2 changed files with 24 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/images/shumi-widget.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.3 MiB

27
src/components/analytics/BinotelWidget.tsx
View file

@ -1,10 +1,31 @@
import Script from 'next/script'
const BRAND_CSS = `
#bingc-phone-button{left:auto!important;right:24px!important;bottom:24px!important}
#bingc-phone-button svg.bingc-phone-button-circle circle.bingc-phone-button-circle-inside{fill:#396817!important}
#bingc-phone-button:hover svg.bingc-phone-button-circle circle.bingc-phone-button-circle-inside{fill:#2d5312!important}
#bingc-phone-button svg.bingc-phone-button-circle circle.bingc-phone-button-circle-outside{fill:#396817!important;fill-opacity:.15!important}
#bingc-phone-button::after{content:''!important;display:block!important;position:absolute!important;top:9px!important;left:9px!important;width:79px!important;height:79px!important;background:url('/images/shumi-widget.png') center 25%/200% no-repeat #f1fbeb!important;border-radius:50%!important;z-index:10!important;pointer-events:none!important}
#bingc-passive div.bingc-passive-overlay{background:#396817!important;background-image:none!important;border-radius:16px!important}
#bingc-active{background:rgba(57,104,23,.97)!important}
#bingc-passive a.bingc-passive-phone-form-button{background:#f28b4a!important;border-radius:8px!important}
#bingc-passive a.bingc-passive-phone-form-button:hover,#bingc-passive a.bingc-passive-phone-form-button:active{background:#e07a39!important}
#bingc-active a.bingc-active-phone-form-button{background:#f28b4a!important;border-radius:8px!important}
#bingc-active a.bingc-active-phone-form-button:hover,#bingc-active a.bingc-active-phone-form-button:active{background:#e07a39!important}
#bingc-passive div.bingc-passive-date-selection-select-hour,#bingc-passive div.bingc-passive-date-selection-select-minutes,#bingc-active div.bingc-active-date-selection-select-hour,#bingc-active div.bingc-active-date-selection-select-minutes{background:#f28b4a!important}
#bingc-passive div.bingc-passive-date-selection-select-day:hover,#bingc-active div.bingc-active-date-selection-select-day:hover{background:#f28b4a!important}
#bingc-phone-button-tooltip{background:#f28b4a!important;border-color:#f28b4a!important;border-radius:8px!important}
#bingc-phone-button-tooltip .bingc-phone-button-arrow polyline{fill:#f28b4a!important}
`
export function BinotelWidget({ widgetId }: { widgetId: string }) {
if (!widgetId) return null
return (
<Script id="binotel-widget" strategy="afterInteractive">
{`(function(w,d,u,b){w['binotelCallTrackerObject']=b;w[b]=w[b]||function(){(w[b].q=w[b].q||[]).push(arguments)};var s=d.createElement('script');s.async=true;s.src=u;var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})(window,document,'//app.binotel.com/smart-button/build/smart-button.js','binotelSmartButton');binotelSmartButton('run','${widgetId}');`}
</Script>
<>
<style dangerouslySetInnerHTML={{ __html: BRAND_CSS }} />
<Script id="binotel-widget" strategy="afterInteractive">
{`(function(d,w,s){var h='${widgetId}',g=d.createElement(s);g.type='text/javascript';g.async=true;g.src='//widgets.binotel.com/getcall/widgets/'+h+'.js';var n=d.getElementsByTagName(s)[0];n.parentNode.insertBefore(g,n);})(document,window,'script');`}
</Script>
</>
)
}