Click-to-call widget is a button for your website that allows your customers to make a call over VoIP without leaving the website.
Call a Voximplant user / SIP address / phone number
You can dial an extention number after the call establishes
You can mute/unmute your microphone during the call
You can choose the microphone and test it by recording your voice and playing it back
You can see the connection status and quality
How to use
- Create another scenario for the call itself. You can call a phone number, a Voximplant user, or a SIP address. Depending on your destination, copy the suitable code example into your scenario.
Use this code if you are going to call a user:
Use this code if you are going to call a phone number:
Use this code if you are going to call a SIP address:
If you want to call a phone number, you need a verified Caller ID. You can buy a phone number from Voximplant or use any phone number that is verified via an automated call from Voximplant and confirmation code.
- Make a routing rule for the microphone testing scenario. Set the mask pattern to
testmicand place the rule to the top.
- Make another routing rule for the call scenario. Place the rule below the microphone testing scenario.
The VoxEngine setup is done, now start with the widget itself.
- Download the widget repository
npm installin the widget directory
- Rename the .env.example file to .env
- In the .env file:
Fill your user credentials into the
Add the number to call to the
testmicstring to the
npm run serveto run the development build
- Open the http://localhost:8080/ URL to test the application
- Once the application works correctly, you can assemble the application
- If you do not plan to upload the application to the webserver root folder, set up the
publicPathproperty in the
vue.config.jsfile. See the instruction
- To make a production build, run
npm run build
distdirectory will contain the production build ready to upload to the server.
public — Project's static materials, such as favicon and the index.html template, where you can add any additional code, such as action counters
src — Zingaya project code
src/assets — Assets: images and sounds
src/components — Application source code
src/router — Application routing files
src/views — Application pages: Home.vue is the default page, Button.vue is the button page to be placed on the website
The get parameters starting with
x-are sent as headers to the VoxEngine scenario
You can see the widget example in new window at: http://localhost:8080/button