search

cross-solution / cross-solution.de

Homepage of CROSS Solution uses Strapi Backend cross-solution/cms
https://cross-solution.de
MIT License
2 stars 11 forks source link

integrate calendly into our homepage #66

Closed cbleek closed 3 years ago

cbleek commented 3 years ago

@kilip

I would like to integrate calendly into our homepage. I've added it in https://github.com/cross-solution/cross-solution.de/commit/c7d8846b16280a8e2962ab8a0bf09dfcc30b6428

But this breaks the website in ssr mode. Do you have time to get this running in SSR mode?

page in spa mode

yarn dev

Auswahl_999(433)

page in ssr mode

yarn dev:ssr

Auswahl_999(434)

kilip commented 3 years ago

Hello Carsten,

Yes, I can work om it. I will take a look at it today.

Regards, Toni

On Wed, Oct 28, 2020, 2:21 AM Carsten Bleek notifications@github.com wrote:

@kilip https://github.com/kilip

I would like to integrate calendly into our homepage. I've added it in c7d8846 https://github.com/cross-solution/cross-solution.de/commit/c7d8846b16280a8e2962ab8a0bf09dfcc30b6428

But this breaks the website in ssr mode. Do you have time to get this running in SSR mode? page in spa mode

yarn dev

[image: Auswahl_999(433)] https://user-images.githubusercontent.com/858642/97343997-76a3d780-1888-11eb-8f19-06883b0d3ee2.png page in ssr mode

yarn dev:ssr

[image: Auswahl_999(434)] https://user-images.githubusercontent.com/858642/97344642-4f013f00-1889-11eb-8aae-2b488c332ca9.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/cross-solution/cross-solution.de/issues/66, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACJQCN5GYPBCUHDVLOJOBLSM4FUJANCNFSM4TBGYXUQ .

cbleek commented 3 years ago

@kilip

there is still an issue. (we've moved the celendly to another page, but I could see the behavior on the about page, too)

If I go th ou contact page. I can see the celendly.

https://cross-solution.de/contact

But a shift reload in a browser leads to the following error in log syslog. Which ends in a "504 Gateway Time-out" of the nginx. I have no Idea how to debug this. Can you take once again some time and try to solve the issue?

Oct 29 19:38:38 quasar quasar[17694]: (node:17695) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'options' of undefined
Oct 29 19:38:38 quasar quasar[17694]:     at server-bundle.js:1:16244
Oct 29 19:38:38 quasar quasar[17694]:     at Array.map (<anonymous>)
Oct 29 19:38:38 quasar quasar[17694]:     at server-bundle.js:1:16218
Oct 29 19:38:38 quasar quasar[17694]:     at /srv/cross-solution/releases/293/node_modules/vue-router/dist/vue-router.common.js:2096:11
Oct 29 19:38:38 quasar quasar[17694]:     at Array.forEach (<anonymous>)
Oct 29 19:38:38 quasar quasar[17694]:     at /srv/cross-solution/releases/293/node_modules/vue-router/dist/vue-router.common.js:2095:25
Oct 29 19:38:38 quasar quasar[17694]:     at /srv/cross-solution/releases/293/node_modules/vue-router/dist/vue-router.common.js:2210:7
Oct 29 19:38:38 quasar quasar[17694]:     at step (/srv/cross-solution/releases/293/node_modules/vue-router/dist/vue-router.common.js:1894:7)
Oct 29 19:38:38 quasar quasar[17694]:     at step (/srv/cross-solution/releases/293/node_modules/vue-router/dist/vue-router.common.js:1901:9)
Oct 29 19:38:38 quasar quasar[17694]: (node:17695) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 4)
kilip commented 3 years ago

@cbleek

Looks like this problems only occurs in google chrome. I have tried to browse contact pages with firefox and it works nicely. I will try to integrate calendly using this instructions:

https://calendly.com/blog/product-update-embed-calendly-into-your-website/

screenshot

cbleek commented 3 years ago

No, same problem on my side. Using Firefox on Mac and Linux. Shift Reload

But you're right. Maybe the vue-calendly is buggy. If you integrate it from scratch I prefer using the pop-up-text version.

https://calendly-embed.com/pop-up-text

kilip commented 3 years ago

@TiSiE @cbleek

Looks like we can use calendly widget directly without components, by using this code:

        <!-- Calendly inline widget begin -->
        <q-no-ssr>
          <div class="calendly-inline-widget" data-url="https://calendly.com/cross-solution" style="height:630px;"></div>
          <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
        </q-no-ssr>
        <!-- Calendly inline widget end -->
cbleek commented 3 years ago

yes. It works. In Firefox and Chrome.

Can you show us, how to integrate it as pop-up-text version?

cbleek commented 3 years ago

Just found this in my calendly account. All we have to is to surround it with no-ssr. And "Zeitplan Zeitfenster" Text Link is shown.

@kilip I think, we have it. Thank you for helping us.

<!-- Calendly Link-Widget Beginn -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>
<a href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/cross-solution'});return false;">Zeitplan Zeitfenster</a>
<!-- Calendly Link-Widget Ende -->
TiSiE commented 3 years ago

@cbleek I found the reason for the problem, that the calendly popup is not shown on the production site but in your development environment:

On the production site, the script tag is not rendered: calendly-script-missing

I have not figured out yet why that is, though....

cbleek commented 3 years ago

In the end I've simply added a link, which opens a new window.

Why simple, when it can also be complicated:-)

https://cross-solution.de/contact