1

I have a page that shows merchant calendar https://staggingv2.tappio.me/c/sami/Tappio-Meeting

Now I want to build functionality that allow merchant to embed this page on their own website using script. The Same feature is provided by calendly some like this. and I want to implement this feature as well in my website. enter image description here

I have very less knowledge about webpack config. I have go through this but there is not much guidance in this answer. I know I have to build this page to public directory but how i will achieve this just for single page?

Can anyone provide me pathway to achieve this functionality?

<!-- Calendly inline widget begin -->
  <div class="calendly-inline-widget" data- 
  url="https://calendly.com/s-m-sami125" style="min- 
  width:320px;height:630px;"></div>
 <script type="text/javascript" 
 src="https://assets.calendly.com/assets/external/widget.js" 
 async></script>
 <!-- Calendly inline widget end -->

This is the page which is embedded in external website just by above script. https://calendly.com/s-m-sami125/test?month=2022-12 You can see that in sandbox https://codesandbox.io/s/eloquent-chaplygin-lxssxo?file=/index.html

Muhammad Sami
  • 520
  • 2
  • 8
  • 21

1 Answers1

0

I think this is not a webpack question. At first glance most developers would recommend iFrame. You can simply generate the calendar on your NextJs server without any menu and frame, then share the JS code with your merchant to embend it. If you choose this way you may facing problems with design (maybe the target page have different design than your page) and Cross-Origin Resource Sharing (CORS) issues. CORS can be solved if you have admin rights on your server (I assume you have) but If you allow access to it for every source this should be a security problem.

I think providing an API is a better solution. You can make API in NextJs easily and your merchants display data as they want in any design. Calling an API is easy from any framework nowdays.

kepes
  • 590
  • 2
  • 11
  • I have updated script which Calendly provide. I cant use iframe due to some technical reason. That script run the functionality and I am looking for that functionality – Muhammad Sami Dec 01 '22 at 19:44
  • I don't understand your problem, maybe you should clarify it. What is the exact problem of the provided code? What is your technical problem with I frame? Maybe a good idea to provide a test project on codesandbox or codepen. I made a test project with provided code here: https://codesandbox.io/s/wispy-morning-t8qjh1?file=/index.html It contains JS error and CORS is also a problem as I mentioned in my answer that is the reason why nothing generated into the DIV element. – kepes Dec 02 '22 at 12:14
  • This is the feature provided by Calendly that allow user to embed their meeting schedule in external website. There are three possible way as you see in above photo. I have copied inline embed script provided by Calendly just for example and that is the exact functionality i am looking for. I have updated sandbox link you can see just by script I get complete page on external website. I also want to prepare that kind of script – Muhammad Sami Dec 02 '22 at 18:48
  • I still don't understand the problem. I don't see any error in the codesandbox example, I see embedding works. What does the question refer to? I don't understand what is the problem with webpack? As I can see you can embed the calendar. Please clarify you problem! – kepes Dec 04 '22 at 10:32
  • This embedding feature is provided by calendly. The embedding you see in codesandbox in done with calendly script. I want to implement this feature in my website in a same way like calendly is doing. – Muhammad Sami Dec 04 '22 at 11:57
  • I'm sorry, maybe we are facing some translation problem but I still don't understand the question. You write a question and you also provide an answer with an example. I don't understand your problem due you didn't provide any error message or code example for your problem. Only code example what you provide is working so the answer for your question "how to embed something into a page" was answered by yourself with example code. That is the way how you can embed it. If you can't clarify your problem I can't help and I'm out of this conversation. – kepes Dec 05 '22 at 12:09
  • I think @MuhammadSami is looking for some solutions for embeddable components. All other websites can use their components in their pages. If I understand right, Stencil is a great library for building reusable Web Component. – Alex Lam Jul 06 '23 at 08:56